java程序员菜鸟进阶(十二)Extjs4常用功能(四)tab面板的使用

在开发中,某一项功能包含两个子功能,有时候我们就需要用到tab面板把这几个子功能一一显示出来,extjs中同样为我们提供了这个功能,我在项目运用的时候出现了一些问题,现把解决方案在此记录一下,算是做个备忘。首先看一下extjs官网上给出的一个简单小实例:

[javascript]view plaincopyprint?
  1. Ext.create('Ext.tab.Panel',{
  2. width:300,
  3. height:200,
  4. activeTab:0,
  5. items:[
  6. {
  7. title:'Tab1',
  8. bodyPadding:10,
  9. html:'Asimpletab'
  10. },
  11. {
  12. title:'Tab2',
  13. html:'Anotherone'
  14. }
  15. ],
  16. renderTo:Ext.getBody()
  17. });


这个示例很简单,简单说明一下吧

首先创建一个tab面板

activeTab设置默认活动tab,这里可以设置索引(从0开始),也可以根据id设置

Items里面设置包含的tab标签页

Html设置该tab标签页显示的html内容

简单看一下截图:

java程序员菜鸟进阶(十二)Extjs4常用功能(四)tab面板的使用

Ok,下面看一下我在项目中运用到的实例,需求是这样的,我想在tab面板里显示两个tab标签页,这两个tab标签页分别加载从服务器加载下来的不同页面,这也算是我们在开发中常用的功能吧。说说我起初的作法吧,下面具体来看一下起初的代码:

[javascript]view plaincopyprint?
  1. Ext.onReady(function(){
  2. vartabs1=Ext.create('Ext.tab.Panel',{
  3. title:'金融机构评分明细',
  4. renderTo:Ext.getBody(),
  5. //frame:true,
  6. activeTab:'tab1',//指定默认的活动tab
  7. width:'100%',
  8. height:800,
  9. items:[
  10. {
  11. id:"tab1",
  12. title:'得分情况',
  13. autoLoad:{
  14. xtype:"tabpanel",
  15. url:"EvaluateAction!evaluateDetail?id=<%=request.getParameter("evaluateId")%>",
  16. scripts:true,
  17. }
  18. },
  19. {
  20. id:"tab2",
  21. title:'相关表格',
  22. autoLoad:{
  23. xtype:"tabpanel",
  24. url:"EvaluateAction!evaluateReport?id=<%=request.getParameter("evaluateId")%>",
  25. scripts:true,
  26. }
  27. }
  28. ]
  29. });
  30. });


错误:这里只有一个tab能用。另一个tab点不动(点了没反应),并且用firebug调试发现,每当我鼠标滑过某一控件时都会增加一个报错信息,但是都是对ext-all内容的错误提示。如果把上面的scripts:true这个配置去掉,程序就可以运行了。但是凡是用ext写出的控件就都不显示了。用html写的控件可以显示.这个问题的具体原因我也不太清楚,所以,只好选择另一种实现方式了。

下面看一下正确实现的代码:

[javascript]view plaincopyprint?
  1. Ext.onReady(function(){
  2. <%intevaluateId=Integer.parseInt(request.getParameter("evaluateId"));%>
  3. vartabs1=Ext.create('Ext.tab.Panel',{
  4. title:'金融机构评分明细',
  5. renderTo:Ext.getBody(),
  6. width:'100%',
  7. height:1000,
  8. activeTab:'tab1',
  9. items:[
  10. {
  11. id:"tab1",
  12. title:'得分情况',
  13. html:"<iframeid='a'name='a'src='EvaluateAction!evaluateDetail?id=<%=evaluateId%>'width='100%'height='1000'frameborder='0'></iframe>",
  14. },
  15. {
  16. id:"tab2",
  17. title:'相关表格',
  18. html:"<iframeid='b'name='b'src='EvaluateAction!evaluateReport?id=<%=evaluateId%>'width='100%'height='1000'frameborder='0'></iframe>",
  19. }
  20. ]
  21. });
  22. });


这里正确实现的方法其实原理就是用到的ext官方给出的简单例子,只是我在tabhtml属性中显示定义了一个iframe,然后让iframe去加载我想要的动态页面,这样实现出来比较简单,也比较容易理解。简单看一下截图:

java程序员菜鸟进阶(十二)Extjs4常用功能(四)tab面板的使用

OK,关于extjstab面板的使用就简单介绍到这里,不得不说明的是,我对extjs没有系统的学习过,只是现学现卖,用到什么功能就去查什么功能的的具体实现方法,记录下来也仅是为了方便大家用到类似功能时有一个参考。在介绍中未免会出现一些错误,还希望大家多多指正。