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

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

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

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;
                    }
                });
            }
        }
    }
});