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

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

[javascript] view plain copy print ?

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内容

简单看一下截图：

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

[javascript] view plain copy print ?

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 plain copy print ?

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官方给出的简单例子，只是我在tab的html属性中显示定义了一个iframe，然后让iframe去加载我想要的动态页面，这样实现出来比较简单，也比较容易理解。简单看一下截图：

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