extjs怎么设置tabpanel详解

Ext.onReady(function(){   

    var i = 4    

    //注意:每个Tab标签只渲染一次   

    var tabs = new Ext.TabPanel({   

        renderTo: Ext.getBody(),//绑定在body标签上   

        activeTab: 0,//初始显示第几个Tab页   

        deferredRender: false,//是否在显示每个标签的时候再渲染标签中的内容.默认true   

        tabPosition: 'top',//表示TabPanel头显示的位置,只有两个值top和bottom.默认是top.   

        enableTabScroll: true,//当Tab标签过多时,出现滚动条   

        items: [{//Tab的个数   

            title: 'Tab 1',   

            html: 'A simple tab',   

            listeners: {render:function(){//为每个Tab标签添加监听器.当标签渲染时触发   

                Ext.Msg.alert("Tab 1","渲染Tab 1成功")    

            }}   

        },{   

            title: 'Tab 2',   

            html: 'Another one',   

            listeners: {render: myRender}   

        },{   

            title: 'Tab 3',   

            autoLoad: 'test.html',   

            closable: true,   

            listeners: {render: myRender}   

        }],   

        bbar:[{//添加一个底部工具栏,并且在该工具栏上添加两个按钮   

            text:'添加标签',   

            handler:function(){//添按钮被点击时触发这个匿名函数(注意:该属性在button中能查到).   

                var id = i    

                tabs.add({//添加一个Tab标签   

                    id: id,   

                    title:'Tab '+i,   

                    closable: true  

                })    

                i=i+1   

                tabs.setActiveTab(id) //当id为"id"的Tab标签显示(变为活动标签).   

            }   

        },{   

            text:'删除标签',   

            handler: function(){   

                var t = tabs.getActiveTab()//获得当前活动标签的引用   

                if(t.closable){   

                    tabs.remove(t)//删除标签   

                }else{   

                    Ext.Msg.alert("提示","该标签不能关闭")    

                }   

            }   

        }]   

    })   

       

    //把TabPanel组件充满整个body容器.   

    new Ext.Viewport({   

        layout: 'fit',   

        items: tabs   

    })   

})

给每个panel一个唯一ID，用getCmp来取，如果返回空则初始化一个panel

var tab = centerPanel.getComponent("tab" + record.raw.id)//获取tab对象

if (!tab) {//如果tab不存在，就创建并添加到centerPanel中

tab = Ext.create('Ext.Panel', {…})

centerPanel.add(tab)

}

centerPanel.setActiveTab(tab)//设置显示当前面板

var tab = Ext.create('Ext.tab.Panel', {

    items : [{

        title : 'A',

        items : AGrid

    }, {

        title : 'B',

        items : BGrid

    }, {

        title : 'C',

        items : CGrid

    }, {

        title : 'D',

        items : DGrid

    }]

})

---