Question

下面是Ext.grid.Panel列的渲染器。假设contactStore中有2,000个值，我关心的是基于id（本例中为value参数）的记录名称，而我的网格中只有25行/记录用于我所在的页面。如何动态获取商店以便我获取网格列id的相关关联记录（基于外键），而不是加载所有2,000条记录？有没有办法加载商店然后在回调中，不知何故有这个“渲染器”功能显示回调成功后的值？

columns: [{

...

}, {
    header: 'Contact Name',
    flex: 1,
    sortable: true,
    dataIndex: 'contact_id',        
    renderer: function(value) {
        var contactStore = Ext.StoreManager.lookup('Contacts');
        return contactStore.getById(value).get('full_name');
    }
}, {

Answer 1

您可以调整collectData(records, startIndex)中的viewConfig：

Ext.create('Ext.grid.Panel', {
    (...)
    viewConfig: {
        //this method needs to be adjusted
        collectData: function(records, startIndex) {
            var me = this;
            //we can use a custom function for this
            if (me.onBeforeCollectData) {
                me.onBeforeCollectData(records);
            }            
            var data = me.superclass.collectData.call(me, records, startIndex);
            return data;
        },

        onBeforeCollectData: function(records) {
            var newExtraParams = [];
            var oldExtraParams;
            var needToLoadStore = false;
            var contactStore = Ext.StoreManager.lookup('Contacts');         

            if (contactStore) {
                oldExtraParams = contactStore.oldExtraParams;
            } else {
                //don't use autLoad: true, this will be a local store
                contactStore = Ext.create('Ext.data.Store', {
                    storeId:'Contacts',
                    (...)                   
                });
                needToLoadStore = true;
            }

            for (var x in records) {
                //contact_id is read out here
                var param = records[x].get('contact_id');
                if (param) {
                    if (needToLoadStore == false && Ext.Array.contains(oldExtraParams, param) == false) {
                        needToLoadStore = true;
                    }
                    newExtraParams.push(param);
                }                
            }           

            if (needToLoadStore == true) {
                //we use this to load the store data => because of async: false property
                Ext.Ajax.request({
                    scope: this,
                    //this is for synchronous calls
                    async: false,
                    url: (...),
                    method: (...),
                    params: newExtraParams,
                    success: function (res, opt) {
                        var responseObj = Ext.decode(res.responseText, false);
                        contactStore.loadData(responseObj); //or deeper in the responseObj if needed
                        contactStore.oldExtraParams = newExtraParams;
                    }
                });
            }
        }
    }
});

根据Ext.grid.Panel列的可见页面数据动态加载存储

1 个答案: