如何更快地加载多个网格
Posted
技术标签:
【中文标题】如何更快地加载多个网格【英文标题】：How to load multiple grids faster 【发布时间】：2013-02-01 13:57:37 【问题描述】：我有 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);
);
【问题讨论】：
您的商店是否使用远程寻呼或过滤？如果他们不使用任何一个，我可以将其调整为更快。 @Reimius ...快得多？我很想听听你的方法。因为我们为一个真正的大型项目测试了几乎所有场景，即使是微优化也是相关的。唯一的变体是提供应用程序已经提供的所有数据，但这有其自身的缺点。 实际上 Reimius... 我根本不使用分页或排序，因为每个网格中的最大记录是 5。我绝对想看看你如何调整它。 【参考方案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 调用优化为一个应该会产生很大的影响。
【讨论】：
@EagleFox 正确，通过这种方法，您可以将请求减少到一个。 +1 我直接使用它，因为它被引入 ExtJS 并且不再有这些问题。但根据 eagle 的最后一条评论，我认为他的问题取决于一些布局问题。 我也这么认为 sra.. 请看我的更新...你能看到我的布局有什么问题吗...我想如果我能弄清楚，它可能是 FnSetValue...应该我为表单设置值并在 itemclick 上调用 ajax 而不是“选择更改” 感谢 Reimius...这确实是我的布局...我没有调用函数“onchange”，而是将其重定向到 itemclick 事件...并且还在所有 4 个网格上实现了一个 ajax 调用。 .. 重大改进...感谢@sra 的提醒...你们太棒了【参考方案2】：你不能在这里做更多的事情。我认为你可以做一些微曲，但我怀疑它们是否值得花时间来识别。如果您的应用执行以下操作，则说明您的操作完全正确；
加载完毕之前的时间 仅初始化所需的控制器和存储（检查每个请求） 显示主视图一旦你的网格被渲染，它们就会触发加载操作，至少当它们有一个分页工具栏时。您可以更早地开始加载操作，这意味着在创建视图之前可能会给您一些毫秒，但我怀疑您是否可以节省更多时间。
这当然是基于现有的信息。
【讨论】：
同意，真的没有太多工作要做。我注意到 ArrayStore 往往比使用纯 JSON 数据更快，但这仍然是一个微优化。 我想我已经完成了所有这些 sra。我的网格仅在表单处于活动状态时加载...所以当我单击一个选项卡以激活我的表单时，它会滞后大约 3 秒...我什至创建了一个存储过程来更快地返回值，但没有改进 @EagleFox 这听起来不像是加载问题...请注意，即使商店未加载，网格也会呈现。然后它将简单地显示带有模糊主体的加载消息。所以我猜你这里有一个设计/布局问题导致了这个问题。 sra...在我的萤火虫上，我可以看到所有四家商店都在加载...请查看我的更新帖子 另外...确保在没有打开 firebug 的情况下测试页面。由于 extjs 代码库的深度，Firebug 有时可以通过 Extjs 真正减慢 firefox 的速度。如果您希望在调试过程中速度“正常”，请使用 chrome。以上是关于如何更快地加载多个网格的主要内容，如果未能解决你的问题，请参考以下文章