Sencha Touch 中多次重用 store 时的性能问题?
李小翔
2014-01-07 10:24

内容列表

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 );
上面例子中，还可以进行进一步的优化，如：
判断如果是同一个任务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;
}