2

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,}

これは私のストア1です...同様に、それぞれパラメータQ2、Q3、Q4を持つこのようなストアがさらに3つあります

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

私が持っている方法よりも速く/より良い実装方法はありますか？

アップデート - ここに画像の説明を入力してください

2回目の更新-

これがアプリケーション全体のレイアウトです...私の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);


}
});
4

2 に答える 2

3

ここではこれ以上のことはできません。いくつかのマイクロチューンを実行できると思いますが、特定するのに時間をかけた価値があるとは思えません。アプリが次のことを行う場合、すべてが正しく行われています。

  • ロードされるまでの時間
  • 必要なコントローラーとストアのみを初期化します (各要求を確認します)。
  • メインビューを表示

グリッドがレンダリングされるとすぐに、少なくともページング ツールバーがある場合は、ロード操作が開始されます。ビューを作成する前に読み込み操作を開始することもできますが、数ミリ秒かかる場合がありますが、これ以上時間を節約できるとは思えません。

もちろん、これは入手可能な情報に基づいています。

于 2013-02-01T14:30:56.813 に答える
3

非常によく似た私の 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: [...]
}

次に、すべてのストアを作成した後、Web ページで ajax 呼び出しを 1 回実行して、4 つのグリッドすべてのデータを取得します。

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 呼び出しを 1 つに最適化すると、大きな影響が生じるはずです。

于 2013-02-01T15:12:13.287 に答える