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

时间:2012-06-18 08:42:33

标签: javascript-events extjs extjs4 extjs4.1

我正在寻找一个解决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'
        }
    }
});

好吧,每次我测试这段代码时,我都会获得一个gridpanel,其中Company列在每一行中包含'test name',我相信这个问题的原因是渲染器函数在customer_store完全加载之前起作用。 有谁知道如何解决这个问题?

关心恩里科。

1 个答案:

答案 0 :(得分:2)

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

因此,请勿自动加载branch_store。而是捕获网格面板的afterrender事件,加载存储customer_store,如下所示:

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