学步园

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

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

首先创建一个tab面板

activeTab设置默认活动tab，这里可以设置索引（从0开始），也可以根据id设置

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

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

简单看一下截图：

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

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

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

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

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