extjs grid中columns用到的store未初始化完成的解决办法

最新推荐文章于 2023-01-26 11:35:58 发布

最新推荐文章于 2023-01-26 11:35:58 发布 · 307 阅读

文章标签：

#extjs #grid #store预加载

extjs grid store 专栏收录该内容

1 篇文章

订阅专栏

本文介绍在使用ExtJS开发Grid时遇到的编辑器加载问题。当编辑器依赖的数据Store未加载完成就开始加载Grid数据时，可能导致某些列无法正常显示。文章提供了具体的解决方案：通过设置Store的autoLoad为false，并在所有依赖的Store加载完成后手动重新加载Grid数据。

使用extjs 开发grid的时候，如果某列的editor是store ,在store没有完成加载的时候，加载list数据，可能出现

该列不显示的问题，如下

{
    header: '站点', dataIndex: 'stationId', flex: 1,
    renderer: function (value) {
        var store = stationStore;
        var record = store.queryBy(function (rec) {
            if (rec.data.code == value) {
                return true;
            }
        }, this);
        if (record.getCount() == 1) {
            return record.get(0).data.name;
        }
    },
    editor: {
        columnWidth: 1,
        xtype: 'combobox',
        typeAhead: true,
        editable: true,
        queryMode: 'local',
        valueField: "code",
        displayField: 'name',
        forceSelection: true,
        store: stationStore
}
},
第一次加载页面的时候，容易出现该列不显示的问题,解决办法如下
先设置list的store autoLoad:false
列中用到的store 加载完成后再调用list.getStore().reload().

var coalTypeStore = Ext.create('Ext.data.Store', {
    autoLoad: true,
    fields: [{name: "name", type: "string"},
        {name: "code", type: "string"}],
    proxy: {
        // async: false,
type: 'ajax',
        url: ',
        reader: {
            type: 'json',
            root: 'records'
}
    },
    listeners: {
        'load': function () {
            if (stationStore.getCount() > 0) {
//其他store是否加载完成 
                Ext.getCmp('xx').getStore().load();
            }
        }
    }
});