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属性来判断是否渲染成功。