[转载]ExtJS中tabPanel的实现详解

在做这项目有快一年了，有些体会想和大家分享分享，所以决定利用这个平台一方面是记录一些自己的心得，另一方面也希望能在这里给大家带来更多的知识，和大家好好交流交流。





进入正题：



在extJS中有个叫tabPanel的玩意做的挺炫的，但是官方的api写的不是很详细，下面用一个简单的sample和大家详细探讨一下是怎么实现的。





一般来说tabpanel都是嵌在中panel中的，下面【爱思特】就和大家说说在项目中，如果你对我们的团队有兴趣，请关注我们的网站，www#astesys#com(“#”换成”.”)，你可以通过邮件订阅我们的内容，我们会每天发送给你最新的技术知识！



如 在主panel中加入一个item，如下：

items:[my.test.initTabPnl()]



下面是my.test.initTabPnl()方法

/**

* Tab页区域

*/

my.test.initTabPnl=function(){

    //在my.test.listGrid中选择一条记录

    my.test.sel = my.test.listGrid.getSelectionModel().getSelected();

    //选择这条记录的相关列

    my.test.currId = my.test.sel.get("ID");

    var lx = my.test.sel.get("LX");

    var tabPnl = new Ext.TabPanel({

        activeTab: 0,

        region: ‘center’,

        border: false,

        layoutOnTabChange: true,

          defaults: {autoScroll:true},

          enableTabScroll:true,

        items: [

            //Tab页区域1

            {

                title: 'Tab页区域1',

                id:'panel1',

                name:'panel1',

                layout : 'fit',

                items:[my.test.initForm(bdzlx,true)],

                //动作监听，点击这个tabpanel页，    my.test.panel的工具条上的第二个button就会灰掉

                listeners : {

                    activate : function(){

                            my.test.panel.getTopToolbar().items.items[1].disable();

                        }

                    }

            },

            //Tab页区域2

            {

                title: ‘Tab页区域2′,

                id:’panel2′,

                name:’panel2′,

                layout : ‘fit’,

                items:[    my.test.initJsycsyjlGrid()],

                listeners : {

                    activate : function(){

                            my.test.panel.getTopToolbar().items.items[1].enable();

                        }

                    }

            },

            //Tab页区域3

            {

                title: ‘Tab页区域3′,

                id:’panel3′,

                name:’panel3′,

                layout : ‘fit’,

                items:[    my.test.initGrid()],

                listeners : {

                    activate : function(){

                            my.test.panel.getTopToolbar().items.items[1].enable();

                        }

                    }

            }

        ]

    });

    tabPnl.doLayout();

    my.test.tabPnlView = tabPnl;

    return tabPnl;

}



到此，基本上一个tabPanel就建好了，效果还不错，就不上图了，由于是在公司做项目，所以要保密，上面的内容是经过整理得到的，应该属于自己的知识了