关于extjs中动态添加TabPanel的tab项并以iframe显示的整理

      近来的项目中用到了Extjs 的TabPanel,这也是Extjs最基本,最常用的组件了

网上或者书上的例子里大都是把tab项渲染到一个div中,

这对于在每个Tab页里加载一个页面的情况就不适合了 

用ifame加载不同的页面应该是最合适的方式 

 

网上也有用ifame显示子项的例子,

是把每一个子项都渲染成了一个ifame

感觉这样有问题,因为切换TabPanel的子项时,子页面不刷新

可能是因为每个ifame里对应的内容都都加载到了主页面,再切换时就不重新加载页面了

同时发现ifame对应的页面里再有js弹出窗口的话,窗体的返回值也取不到

而且采用这种方式,文档结构树上会有多个iframe

加载多ifame的代码如下:

 



   
       
       
       
       
       
       
       
   
   
       


       

   

 附图:

关于extjs中动态添加TabPanel的tab项并以iframe显示的整理_第1张图片

 

 

 

后来经过反反复复的测试,终于整理出了一个个人感觉比较好的解决方案

这样页面上只有一个iframe ,加载iframe 内容页面正常。

 

代码如下



   
       
       
       
       
       
       
       
   
   
       


           

           

       

       

           
       

   

 

关于extjs中动态添加TabPanel的tab项并以iframe显示的整理_第2张图片

 

 

你可能感兴趣的:(JavaScript)