Ext JS 4.1：网格列中的渲染器参数不起作用

Posted 2023-02-26

【中文标题】Ext JS 4.1：网格列中的渲染器参数不起作用

【英文标题】：Ext JS 4.1: renderer parameter in grid's columns doesn't work

【发布时间】：2012-06-18 08:42:33

【问题描述】：

我正在寻找解决 extjs 网格面板问题的技巧。 我面临的情况如下：

我有一个由许多列组成的网格面板，这样的网格由日期存储填充。下面我报告网格的数据存储及其相关的数据模型：

Ext.define('branch', 
    extend: 'Ext.data.Model',
    fields: [
        type: 'int',
        name: 'id'
    , 
        type: 'int',
        name: 'customer_id'
    , 
        type: 'int',
        name: 'city_id'
    , 
        type: 'string',
        name: 'address'
    , 
        type: 'string',
        name: 'phone'
    , 
        type: 'string',
        name: 'fax'
    , 
        type: 'string',
        name: 'email'
    ]
);

var branch_store = Ext.create('Ext.data.Store', 
    autoDestroy: true,
    model: 'branch',
    autoLoad: true,
    proxy: 
        type: 'ajax',
        url: 'controller/loader.php?item=branch',
        reader: 
            type: 'json',
            successProperty: 'success',
            root: 'data'
        
    
);

这是网格面板的定义及其列列表：

rowHeight: 0.15,
xtype: 'gridpanel',
id: 'branch_grid',
store: branch_store,
height: 400,
title:'Branch list',
columns: [
    text   : 'id',
width    : 30,
sortable : true,
dataIndex: 'id'
,
    text   : 'Company',
width  :   200,
sortable : true,
dataIndex: 'customer_id',
renderer: get_company
,
    text   : 'City',
width    : 100,
sortable : true,
dataIndex: 'city_id'
//renderer: city_from_id
,
    text   : 'Address',
width    : 100,
sortable : true,
dataIndex: 'address'
,
text   : 'Phone',
width    : 100,
sortable : true,
dataIndex: 'phone'
,
text   : 'Fax',
width    : 100,
sortable : true,
dataIndex: 'fax'
,
text   : 'Email',
width    : 100,
sortable : true,
dataIndex: 'email'

好吧，如果我没有为“公司”列使用渲染器，extjs 将显示一个包含整数的列，即客户的 ID。我不喜欢这样，所以我编写了一个名为 get_company 的简单渲染器，它通过知道客户 ID 来获取客户名称。 为此，它会扫描客户的数据存储以查找具有传递 id 的记录，当它找到该记录时，它会返回包含客户姓名的名为“公司”的记录字段。 这是渲染器的代码：

function get_company(val) 
    if(customer_store.count()>0) 
    console.log('Val: '+ val + ', Stuff: ' + customer_store.count());
    company = ' ' + customer_store.getById(val).get('company');
    console.log(typeof company);
    return company;

else
    console.log('customer store is empty');
    return 'test name';

最后是customer_store及其相关数据模型的代码：

Ext.define('customer', 
    extend: 'Ext.data.Model',
    fields: [
        type: 'int',
        name: 'id'
    , 
        type: 'string',
        name: 'company'
    , 
        type: 'string',
        name: 'vat'
    , 
        type: 'string',
        name: 'ssn'
    , 
        type: 'int',
        name: 'ref_id'
    ]
);

var customer_store = Ext.create('Ext.data.Store', 
    autoDestroy: true,
    model: 'customer',
    autoLoad: true,
    proxy: 
        type: 'ajax',
        url: 'controller/loader.php?item=customer',
        reader: 
            type: 'json',
            successProperty: 'success',
            root: 'data'
        
    
);

好吧，每次我测试这段代码时，我都会获得一个网格面板，其中公司列的每一行都包含“测试名称”，我相信这个问题的原因是渲染器函数在 customer_store 完全加载之前起作用。 有谁知道如何解决这个问题？

【问题讨论】：

我找到了一个技巧来解决我的问题，但我不喜欢它，我想要更聪明的东西。无论如何，修复我的代码的一个丑陋的方法是声明：customer_store.load () 在网格面板渲染之前。

【参考方案1】：

解决问题的唯一方法是确保customer_store 将在branch_store 之前加载。

所以，不要自动加载branch_store。而是为网格面板捕获afterrender 事件，像这样加载存储customer_store：

customer_store.on('load', function() 
   branch_store.load();
, this,  single: true );
customer_store.load();