一般动作
Sencha Touch 中多次重用 store 时的性能问题?
touch中定义了一个 ajax 的 json store，并使用一个 nestedlist 来加载并展示这个 store 中的信息。
但是这个 store 的内容一来比较多（比如上万人的人员组织，不过有延迟加载），二来每次显示这个 nestedList 树时，需要修改 store proxy 加载 url（比如根据当前打开的流程任务加载不同的发送知会人员组织树），以加载不同的数据。这种情况下，多次访问这个 nestedList 后，每次加载变得及其缓慢。
究其原因，在于 store 每次重新加载后需要对新、旧数据进行大量的操作与计算，因此，这种情况下，无法复用这个store。
优化办法也很简单，每次显示 nestedList 时，创建一个新的 store 即可，如下面的示例代码所示：
// 根据store定义，以及本次加载的任务id，创建一个新的store
var store = Ext.create('MyApp.store.SelectPersonJsonTreeStore', {
storeId: 'selectPersonJsonTreeStore_' + taskId,
syncRemovedRecords: false
});
store.getProxy().setExtraParam('taskId', taskId);
// 设置store
nestedList.setStore( store );
var store = Ext.create('MyApp.store.SelectPersonJsonTreeStore', {
storeId: 'selectPersonJsonTreeStore_' + taskId,
syncRemovedRecords: false
});
store.getProxy().setExtraParam('taskId', taskId);
// 设置store
nestedList.setStore( store );
上面例子中，还可以进行进一步的优化，如：
- 判断如果是同一个任务ID，则完全无需执行上面代码，直接复用老的 store 和 已经渲染好的 nestedList
- 每次创建新的 store 时，销毁所有不再使用的 store
如下面代码所示：
// 如果数据标识发生变化，才重新加载数据和渲染列表
if ( taskId == nestedList.taskId ) {
// 销毁所有老的 store
Ext.data.StoreManager.each(function(s){
if ( s.getStoreId().indexOf("selectPersonJsonTreeStore_") == 0 )
s.destroy();
});
// 创建新的 store
var store = ....
nestedList.setStore( store );
// 记录本次加载数据的标识
nestedList.taskId = taskId;
}
if ( taskId == nestedList.taskId ) {
// 销毁所有老的 store
Ext.data.StoreManager.each(function(s){
if ( s.getStoreId().indexOf("selectPersonJsonTreeStore_") == 0 )
s.destroy();
});
// 创建新的 store
var store = ....
nestedList.setStore( store );
// 记录本次加载数据的标识
nestedList.taskId = taskId;
}