ExtJS渲染失败解决方案(一)

阅读更多

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

 

1      如何判断页面是否渲染成功

 debugger模式下,通过对gridPanel渲染成功时生成的panel对象的属性与失败时生成的panel对象的属性进行对比,发现当渲染成功时panelwidth属性总是大于0,而失败时panelwidth属性总是小于或等于0,如下图:         

渲染失败

 

渲染成功

2     解决方法

2.1   当页面只有一个panel

当页面只有一个panel时,只需要在其返回一个panel对象前判断此panelwidth属性,如果属性值小于或等于0,则重新加载。

2.2   当页面存在多个tapPanel

当页面存在多个panel时,不仅要判断gridPanel是否渲染成功,同时也需要判断tapPanel是否渲染成功,如果不成功则重新加载。

 

注:在项目管理系统中,很多页面存在多个panel时,当每生成一个panel,此panelstore都会调用一次load()方法,当页面所有panel都生成后,然后又会调用所需要显示的tabPanelstoreload()方法,这样就会造成页面加载过慢或者数据显示很慢。建议在构造panel的方法中不要调用storeload()方法加载数据,只需要在生成所有的tabPanel之后再加载所需要显示panel的数据。

 

3      代码范例

3.1   范例一

   当数据量不大时:

//如果gridPanel渲染失败,则重新加载。

if(Ext.getCmp('workloadListID').width<=0){

        document.location.reload()

}

 

//如果tabPanel渲染失败,则重新加载

if(tabs.width<=0){

        document.location.reload();

}

 

 

3.2   范例二

   当数据量很大时,页面可能一直加载失败,这样会不停的访问后台,会给服务器造成很大的压力,所以建议使用延时刷新。

//渲染失败时重新渲染

if(Ext.getCmp('changeListID').width<=0){

    setTimeout("history.go(-0)",500);

}

 

 

注:如果利用panelwidth属性无法达到要求,则可以使用height属性来判断是否渲染成功。

你可能感兴趣的:(ExtJS,EXT,渲染)