如何更快地加載多個網格

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

您在這里不能做更多的事情。 我認為您可以進行一些微調，但我懷疑它們是否值得花時間進行識別。 如果您的應用執行以下操作，則說明一切正確。

• 直到您加載的時間
• 僅初始化所需的控制器和存儲（檢查每個請求）
• 顯示主視圖

渲染網格后，它們將至少在具有分頁工具欄的情況下觸發加載操作。 您可以更早地開始加載操作，這意味着在創建可能要花費幾毫秒的視圖之前，但是我懷疑您可以節省更多時間。

當然，這是基於可用信息的。

Answer 2

請參考我的SO問題，該問題非常相似： 組合框加載速度太慢

基本上，您將需要像平常一樣定義所有模型。

然后，您將需要將頁面的所有存儲定義為沒有代理的數組存儲，如下所示：

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調用優化為一個將產生很大的影響。