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?? 范例一

?? 当数据量不大时：

?

?

3.2?? 范例二

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

?

?

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