ExtJS页面渲染失败解决方案（二）

阅读更多

       ExtJS是一种主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架，它功能丰富，界面优美，不过在全面预算管理信息系统开发的过程中，发现ExtJS框架经常出现页面渲染失败的现象，主要表现在数据的列表页面。

1      解决方法

1.1   使用ExtJS自带的defer方法

经分析，页面渲染失败主要集中在列表页面，调试后发现主要是数据加载缓慢导致，ExtJS框架自带函数defer，可以让加载数据延时显示来避免页面渲染失败。对于一般延迟时间的设置，可以设置为50（毫秒），如果还会出现渲染失败，则可考虑设置成200（毫秒）。

var myStore = new Ext.data.JsonStore({

url:..,

result:..

fields:[..]

});

//延时200ms渲染

myStore.load.defer(200, myStore, [{

       params: {

           start: 0,

           limit: 18

       }

}]);

 

 

1.2   重新渲染Ext组件

除了ExtJS自带的defer函数，还可以对Ext组件添加监听事件，在数据加载完毕后触发事件，使panel重新渲染。

var myStore = new Ext.data.JsonStore({

url:..,

result:..

fields:[..]

});

//添加监听事件，在数据加载完后触发下列函数

myStore.addListener(‘load’,storeReload);

function storeReload(objStore){

    //判断组件是否已经生成

if(Ext.getCmp(‘myGridID’)){

    //重新渲染组件

    Ext.getCmp(‘myGridID’).render(‘myGridDIV’);

}

}