我正在寻找解决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'
}
}
});
这是GridPanel的定义及其列的列表:
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'
}
嗯,如果我不为'Company'列使用渲染器,则extjs将显示一个包含整数的列,该整数是客户的ID。我不喜欢这样,因此我编写了一个名为get_company的简单渲染器,该渲染器通过了解客户ID来获取客户名称。为此,它将扫描客户的数据存储,以查找具有传递的ID的记录,当发现该记录时,它将返回记录的字段“ company”,该字段包含客户的姓名。这是渲染器的代码:
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'
}
}
});
好吧,每次我测试此代码时,都会获得一个网格面板,其中Company列的每一行都包含“测试名称”,我相信此问题的原因是renderer函数在完全加载customer_store之前起作用。有人知道如何解决此问题吗?
解决问题的唯一方法是确保在customer_store
之前先加载branch_store
。
因此,请勿自动加载branch_store
。而是为网格面板捕获afterrender
事件,像这样加载存储customer_store
:
customer_store.on('load', function() {
branch_store.load();
}, this, { single: true });
customer_store.load();