EXTJS学习笔记（三）

Ext.TabPanel控件(TAB块容器)

renderTo 属性 ： 其值为该控件绑定的DIV的ID

width 属性 ：其值为控件的宽

height 属性 ：其值为控件的高

activeTab　属性　：其值为Items所包含元素号,(即为从0开始的),哪个被选中，那个就是当前第一个被激活的块.

defaults 属性 ：设置默认值。里面可以包含其他的默认内置配置｛
1.autoHeight：为true表示自动根据包含的文本内容变行高
2.autoScroll：为true表示自动提供水平下拉条
｝

items 属性 ：其值为用一对大括号[]括起来的一个个元素组，每个元素用{}括起来，然后元素之间用逗号隔开{
1.contentEl : 用来与页面中的某个DIV元素绑定在一起，其值与DIV的ID值相匹配，运行时将内容复制到其TAB块中
2.title:TAB的标题
3.html：对应的一个HTML文本。
4.autoLoad:运用于AJAX里面包含{
url：其值为要加载的HTML或服务器地址
param:表示要传递的参数序列，例如：‘foo=bar&wtf=1’
disabled：表示该项可用还是不可用
}
5.listeners: {activate: fn1}设置一个监听器，当该块被激活时调用fn1函数

}
例子：
   var tabs = new Ext.TabPanel({
        renderTo: 'tt',
        width:450,
        activeTab: 1,
        frame:false,
        defaults:{autoHeight: true},
        items:[
            {contentEl:'d1', title: 'gggg'},
            {contentEl:'d2', title: 'ffff'}
        ]
    });
var tabs2 = new Ext.TabPanel({
        renderTo: document.body,
        activeTab: 0,
        width:600,
        height:250,
        plain:true,
        defaults:{autoScroll: true},
        items:[{
                title: 'Normal Tab',
                html: "My content was added during construction."
            },{
                title: 'Ajax Tab 1',
                autoLoad:'ajax1.htm'
            },{
                title: 'Ajax Tab 2',
                autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
            },{
                title: 'Event Tab',
                listeners: {activate: handleActivate},
                html: "I am tab 4's content. I also have an event listener attached."
            },{
                title: 'Disabled Tab',
                disabled:true,
                html: "Can't see me cause I'm disabled"
            }
        ]
    });