ExtJS渲染失败解决方案（一）

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

 

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

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

渲染失败

 

渲染成功

2     解决方法

2.1   当页面只有一个panel时

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

2.2   当页面存在多个tapPanel时

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

 

注：在项目管理系统中，很多页面存在多个panel时，当每生成一个panel，此panel的store都会调用一次load()方法，当页面所有panel都生成后，然后又会调用所需要显示的tabPanel的store的load()方法，这样就会造成页面加载过慢或者数据显示很慢。建议在构造panel的方法中不要调用store的load()方法加载数据，只需要在生成所有的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);

}

 

 

注：如果利用panel的width属性无法达到要求，则可以使用height属性来判断是否渲染成功。