如何更快地加载多个网格

Question

我有 4 个网格表。他们使用相同的模态。我不能使用同一个存储，因为每个网格都必须发送一个参数值才能从 db 获取数据。所以，发生的事情是我最终创建了 4 个不同的商店，然后当我加载我的应用程序时，它滞后了，因为它等待加载所有 4 个商店。这是我的网格.. 所以我还有 3 个这样的网格

this.grid1 =Ext.create('Ext.grid.Panel',{
    title:'GridView App',        store: store,        loadMask:true,
    columns:[
       { header:'Q1',            sortable:true, dataIndex:'Q1', flex:1,},
       { header:'Q2',            sortable:true, dataIndex:'Q2', flex:1,},
       { header:'Q3',            sortable:true, dataIndex:'Q3', flex:1,},
       { header:'Q4',            sortable:true, dataIndex:'Q4', flex:1,}

这是我的 store1... 同样，我还有 3 个这样的商店，每个都有参数 Q2、Q3、Q4

 var store1 =Ext.create('Ext.data.JsonStore',{
    storeId:'myData',        scope:this,
    fields:[
       { name:'Q1', type:'int'},
       { name:'Q2', type:'int'},
       { name:'Q3', type:'int'},
       { name:'Q4', type:'int'}
   ],        
    sorters:[{            property:'Q1',            direct:'ASC'}],        
    proxy:{            
          type:'ajax',            
          url:'GridView/writeRecord',            
          extraParams: { ID: Q1 },            
          reader: newExt.data.JsonReader({                
               root:'myTable',              
               totalProperty:'count'
           })
       }
 });

有没有比我现有的方式更快/更好的方式来实现它？

更新 -

第二次更新 -

这是我整个应用程序的布局...我的 rightcontainer 最初被禁用并包含实际的网格和表单，然后单击选项卡上的项目启用 rightcontainer 并加载所有网格。

Ext.define('ExtjsApp.app1.appPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.mypanel',
layout: {
    type: 'vbox',
    align: 'stretch'
},
scope: this,
titleAlign: 'center',
minWidth: 900,
bodyPadding: 10,
requires: [],
items: [],
constructor: function () {
    this.callParent(arguments);
    this.regForm = Ext.create('ExtjsApp.app1.RegForm', {});

    leftTreeStore = Ext.create('Ext.data.TreeStore', {
        scope: this,
        storeId: 'leftTreeStore',
        fields: [
            { name: 'text', type: 'string' },
            { name: 'dataId', type: 'string' },
            { name: 'listName', type: 'string' },
            { name: 'leaf', type: 'bool' }
        ],
        root: { expanded: true },
        proxy: {
            type: 'ajax',
            url: 'app1/getRecords',
            extraParams: { organization: 'GOOGLE' },
            reader: { type: 'json' }
        },
        autoLoad: true,
        expanded: true,
        autoSync: true,
        listeners: {
        }
    });

    allRecordsStore = Ext.create('Ext.data.TreeStore', {
        id: 'allRecordsStore',
        autoLoad: false,
        autoSync: false,
        scope: this,
        fields: [
            { name: 'text', type: 'string' },
            { name: 'dataId', type: 'string' },
            { name: 'listName', type: 'string' },
            { name: 'leaf', type: 'bool' }
        ],
        root: { expanded: true },
        proxy: {
            type: 'ajax',
            url: 'app1/getRecords',
            extraParams: { organization: 'GOOGLE' },
            reader: { type: 'json' }
        }
    });

    this.currentMonthsTree = Ext.create('Ext.tree.TreePanel', {
        scope: this,
        title: 'Current 12 Months',
        titleAlign: 'center',
        tabIndex: 0,
        height: 500,
        flex: 1,
        rootVisible: false,
        store: leftTreeStore,
        id: 'currentMonthsTree',
        useArrows: true,
        hideHeaders: true,
        columns: [
            {
                xtype: 'treecolumn',
                id: 'ID',
                dataIndex: 'text',
                flex: 1
            }
        ],
        viewConfig: {
            plugins: {
                ptype: 'treeviewdragdrop',
                enableDrop: false,
                appendOnly: false,
                enableDrag: false
            },
            listeners: {
                itemclick: function (view, rec, item) {
                    if (rec.isLeaf()) {
                        alert('isLeaf');
                    }
                    else if (!rec.isLeaf()) {
                        alert('isNotLeaf');
                    }
                }
            },
            allowCopy: true,
            copy: true
        }
    });

    this.currentMonthsTree.on('selectionchange', function (selected) {
        FnDisplayRecord(selected.selected.items[0]);
    });

    this.allRecordsTree = Ext.create('Ext.tree.TreePanel', {
        scope: this,
        title: 'All Records',
        titleAlign: 'center',
        flex: 1,
        tabIndex: 1,
        rootVisible: false,
        store: allRecordsStore,
        id: 'allRecordsTree',
        useArrows: true,
        hideHeaders: true,
        columns: [
            {
                xtype: 'treecolumn',
                id: 'ID',
                dataIndex: 'text',
                flex: 1
            }
        ],
        viewConfig: {
            plugins: {
                ptype: 'treeviewdragdrop',
                enableDrop: false,
                enableDrag: false,
                appendOnly: false
            },
            listeners: {
                itemclick: function (view, rec, item) {
                    if (rec.isLeaf()) {
                        alert('isLeaf');
                    }
                    else if (!rec.isLeaf()) {
                        alert('isNotLeaf');
                    }
                }
            },
            allowCopy: true,
            copy: true
        }
    });

    this.allRecordsTree.on('selectionchange', function (selected) {
        FnDisplayRecord(selected.selected.items[0]);
        //alert('Hello');
    });

    function FnClearValues() {
        //Clear All Values
        alert('ClearALLValues');
    }

    function FnSetValues(myObj) {
        //I set all my form values using Ext.getCmp
        Ext.getCmp('Textl').setValue(myObj.Text1);
    }


    function FnDisplayRecord(row) {
        if (row.get('leaf') == true) {
            console.log(row.data.dataId);
            var tempID = row.data.dataId;
            Ext.getCmp('rightContainer').setLoading(true, true);
            Ext.getCmp('requisitionPOGridPanel').store.loadData([], false);

            Ext.Ajax.request({
                method: 'GET',
                url: 'app1/getRecord',
                headers: { 'Content-Type': 'application/json' },
                dataType: 'json',
                params: {
                    ID: tempID
                },
                success: function (response) {
                    Ext.getCmp('rightContainer').setLoading(false, false);
                    myObj = Ext.JSON.decode(response.responseText);
                    if (AsbestosObj.DateIssued != '') {
                        FnSetValues(AsbestosObj);
                        Ext.getCmp('GridPanel').store.load({ params: { ID: tempID} });
                        Ext.getCmp('Grid1').store.load({ params: { ID: tempID, qID: 'Q01'} });
                        Ext.getCmp('Grid2').store.load({ params: { ID: tempID, qID: 'Q02'} });
                        Ext.getCmp('Grid3').store.load({ params: { ID: tempID, qID: 'Q03'} });
                        Ext.getCmp('Grid4').store.load({ params: { ID: tempID, qID: 'Q04'} });
                    }
                    else { FnClearValues(); }
                },
                failure: function () {
                    Ext.Msg.alert('Message', 'Error');
                }
            });
        }
        else if (row.get('leaf') == false) {
            FnClearValues();
        }
    }

    this.rightContainer = Ext.create('Ext.form.Panel', {
        scope: this,
        id: 'rightContainer',
        layout: {
            type: 'vbox',
            align: 'stretch',
            pack: 'start'
        },
        autoScroll: true,
        disabled: true,
        border: 1,
        flex: 1,
        items: [
            this.regForm
        ]
    });

    this.tabContainer = Ext.create('Ext.tab.Panel', {
        scope: this,
        activeTab: 0,
        flex: 0.5,
        id: 'tabContainer',
        layout: { type: 'vbox', align: 'stretch' },
        plain: true,
        listeners: {
            tabchange: function (panel, newTab, oldTab) {
                Ext.getCmp('rightContainer').disable();
                FnClearValues();
                var getTabStat = this.getActiveTab();
                if (getTabStat.tabIndex == 0) {
                    Ext.getCmp('currentMonthsTree').store.load();
                }
                else if (getTabStat.tabIndex == 1) {
                    Ext.getCmp('allRecordsTree').store.load();
                }
            }
        },
        items: [
            this.currentMonthsTree, this.allRecordsTree
        ]
    });

    this.mainContainer = Ext.create('Ext.container.Container', {
        scope: this,
        bodyPadding: 10,
        title: 'MAIN',
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        flex: 1,
        items: [
            this.tabContainer,
            { xtype: 'splitter', width: 5, animate: true },
            this.rightContainer
        ]
    });

    this.add(this.mainContainer);
},
loadingOn: function () {
    setTimeout(function () { Ext.getCmp('currentMonthsTree').setLoading(true, true); }, 100);

},

loadingOff: function () {
    setTimeout(function () { Ext.getCmp('currentMonthsTree').setLoading(false, false); }, 100);


}
});

Answer 1

请参考我非常相似的 SO 问题：Combo box loads too slow

基本上，您需要像往常一样定义所有模型。

然后您需要将页面的所有商店定义为没有代理的数组商店，如下所示：

var myStore1 = Ext.create("Ext.data.ArrayStore", {
    model: "MyModel1",
    data:  []
});

var myStore2 = Ext.create("Ext.data.ArrayStore", {
    model: "MyModel1",
    data:  []
});

然后你会想要创建一个调用，无论你从哪里获取数据，你需要更改服务器以将所有数组输出到单个 JSON 对象中，就像这样，为了超级优化，让它们数组数组，这将是我期望从服务器得到的输出：

{
     grid_data_1: [...],
     grid_data_2: [...]
}

然后在您的网页上创建所有商店后，进行一次 ajax 调用以获取所有四个网格的数据：

Ext.Ajax.request({
    url: 'url',
    method: 'GET',
    params: {
        ...whatever you want
    },

    success: function (response, opts) {
         var result = Ext.decode(response.responseText);
         myStore1.loadData(result.grid_data_1);
         myStore2.loadData(result.grid_data_2);
         ...
    },

});

这将使其效率更高，您可能不需要在您的情况下使用数组数组，因为每个网格只有 5 行，但是将 4 个 ajax 调用优化为一个应该会产生很大的影响。

Answer 2

你不能在这里做更多的事情。我认为你可以做一些微曲，但我怀疑它们是否值得花时间来识别。如果您的应用执行以下操作，则说明您的操作完全正确；

• 加载完毕之前的时间
• 仅初始化所需的控制器和存储（检查每个请求）
• 显示主视图

一旦你的网格被渲染，它们就会触发加载操作，至少当它们有一个分页工具栏时。您可以更早地开始加载操作，这意味着在创建视图之前可能会给您一些毫秒，但我怀疑您是否可以节省更多时间。

这当然是基于现有的信息。