接著介紹extjs的基礎(chǔ)吧,Tabpanel組件大家喜歡吧!

Ext.onReady(function(){
     var tabsDemo=new Ext.TabPanel({
            renderTo:Ext.getBody(),
            width:300,
            activeTab:0,//當(dāng)前激活標(biāo)簽
            frame:true,
            items:[{
                      contentEl:"tabOne",//標(biāo)簽頁的頁面元素id(加入你想顯示的話)
                      title:"浪曦",
                      closable:true//是否現(xiàn)實(shí)關(guān)閉按鈕,默認(rèn)為false
            },{
                      contentEl:"tabTwo",
                      title:"博客園兄弟們可好"
            }]
     });
});

<body style="margin:10px;">
    <div>
          <div id="tabOne"  class="x-hide-display">i am tabOne!</div>
          <div id="tabTwo" class="x-hide-display">i am tabTwo!</div>
    </div>
</body>
<!--注意class類型,設(shè)為x-hide-display,以正常顯示-->

在這里例舉幾個(gè)參數(shù):
//幾個(gè)相關(guān)參數(shù)
1.tabPosition:"bottom"//選項(xiàng)卡的位置,枚舉值bottom,top.默認(rèn)為top(只有top的時(shí)候才能選項(xiàng)卡的滾動(dòng)!)
2.tabTip:"提示"//必須先調(diào)用Ext.QuickTips.init();才有效果

經(jīng)常我們有這么個(gè)情況,一個(gè)選項(xiàng)卡加載一個(gè)頁面,這里我提供一種不是很好但是很穩(wěn)定的簡(jiǎn)單方法(已經(jīng)在項(xiàng)目中驗(yàn)證沒有出現(xiàn)問題).
就是:使用iframe作為tab的標(biāo)簽頁內(nèi)容.
2.動(dòng)態(tài)添加tabpanel的標(biāo)簽頁

html代碼：

<body style="margin:10px;">
    <div>
    <a id="AddNewTab" href="javascript:void(0)">添加新標(biāo)簽頁</a>
    </div>
</body>

Ext.onReady(function(){
     Ext.QuickTips.init();
     var tabsDemo=new Ext.TabPanel({
            renderTo:Ext.getBody(),
            activeTab:0,
            height:700,
            frame:true,
            items:[{
                      title:"autoLoad為html簡(jiǎn)單頁面演示",
                      autoLoad:{url:"tab1.htm",scripts:true}
            }]
     });
     //下面是添加新標(biāo)簽頁的關(guān)鍵代碼,很簡(jiǎn)單方便     
     var index=0;
     Ext.get("AddNewTab").on("click",function(){
           tabsDemo.add({
                title:"newtab",
                id:"newtab"+index,
                html:"new tab",
                closable:true
           });
           tabsDemo.setActiveTab("newtab"+index);
           index++;
     })
});

簡(jiǎn)單說明:
    其實(shí)添加的話,只要add()方法就可以了,但是我們還要激活這個(gè)新的標(biāo)簽頁,就必須setActiveTab(newtab的索引或id),關(guān)鍵就是我們不好判斷這個(gè)索引,所以只好設(shè)置個(gè)遞增的全局變量index來給newtab取名，這樣我們也就能準(zhǔn)確的獲取新的不重復(fù)的newtab了，也就容易激活了。而且我們可以通過下圖看出來。

3.稍微修改上面的例子tabpanel(官方的例子)

我就不多說了，關(guān)鍵的幾個(gè)參數(shù)注釋了下
<body style="margin:10px;">
    <div>
       <div id="AddBtn"></div>
    </div>
</body>

Ext.onReady(function(){
     Ext.QuickTips.init();
     var tabsDemo=new Ext.TabPanel({
            renderTo:Ext.getBody(),
            //resizeTabs:true,寬度能自動(dòng)變化,但是影響標(biāo)題的顯示
            activeTab:0,
            height:200,
            enableTabScroll:true,//擠的時(shí)候能夠滾動(dòng)收縮
            width:200,
            frame:true,
            items:[{
                      title:"tab advantage",
                      html:"sample1"
            }]
     });
     
     var index=0;
     
     //就是下面這個(gè)函數(shù),關(guān)鍵的地方,非常簡(jiǎn)單也非常實(shí)用
     function addTab()
     {
         tabsDemo.add({
                title:"newtab",
                id:"newtab"+index,
                html:"new tab"+index,
                closable:true
           });
           tabsDemo.setActiveTab("newtab"+index);
           index++;
     }
     
     //設(shè)置一個(gè)按鈕(上面的是一個(gè)鏈接,應(yīng)用有點(diǎn)不同哦)
     new Ext.Button({
         text:"添加新標(biāo)簽頁",
         handler:addTab
     }).render(document.body,"AddBtn");
});
4.為tabpanel標(biāo)簽頁添加右鍵菜單


//幾個(gè)參數(shù)說明
1.enableTabScroll:true//前面已經(jīng)說過了
2. listeners:{"contextmenu":function(參數(shù)1,參數(shù)2,參數(shù)3){.}}
  //右鍵菜單事件，三個(gè)參數(shù)分別為當(dāng)前tabpanel，當(dāng)前標(biāo)簽頁panle，時(shí)間對(duì)象e
3.//擴(kuò)充2，每個(gè)標(biāo)簽頁都有激活和去激活事件
   activate和deactivate，他們的執(zhí)行函數(shù)有個(gè)參數(shù)，就是當(dāng)前標(biāo)簽頁。
  例如： items:[{
                      title:"tab advantage",
                      listeners:{
                            deactivate:function(a){alert("刪除,a表示當(dāng)前標(biāo)簽頁");},
                            activate:function(){alert("激活");}
                      },
                      html:"sample1"
            }]
4.menu=new Ext.menu.Menu()//menu組件，就不多說了，后面會(huì)專門分析下，不過不要忘記menu.showAt(e.getPoint());了

Ext.onReady(function(){
     Ext.QuickTips.init();
     var tabsDemo=new Ext.TabPanel({
            renderTo:Ext.getBody(),
            //resizeTabs:true,寬度能自動(dòng)變化,但是影響標(biāo)題的顯示
            activeTab:0,
            height:200,
            enableTabScroll:true,//擠的時(shí)候能夠滾動(dòng)收縮
            width:400,
            frame:true,

            //下面是比上面例子新增的關(guān)鍵右鍵菜單代碼
            listeners:{
                     //傳進(jìn)去的三個(gè)參數(shù)分別為:這個(gè)tabpanel(tabsDemo),當(dāng)前標(biāo)簽頁,事件對(duì)象e
                    "contextmenu":function(tdemo,myitem,e){
                                menu=new Ext.menu.Menu([{
                                         text:"關(guān)閉當(dāng)前頁",
                                         handler:function(){
                                            tdemo.remove(myitem);
                                         }
                                },{
                                         text:"關(guān)閉其他所有頁",
                                         handler:function(){
                                            //循環(huán)遍歷
                                            tdemo.items.each(function(item){
                                                 if(item.closable&&item!=myitem)
                                                 {
                                                    //可以關(guān)閉的其他所有標(biāo)簽頁全部關(guān)掉
                                                    tdemo.remove(item);
                                                 }
                                            });
                                         }
                                },{
                                         text:"新建標(biāo)簽頁",
                                         handler:addTab
                                }]);
                                //顯示在當(dāng)前位置
                                menu.showAt(e.getPoint());
                     }
            },

            items:[{
                      title:"tab advantage",
                      html:"sample1"
            }]
     });
     
     var index=0;
     
     function addTab()
     {
         tabsDemo.add({
                title:"ntab"+index,
                id:"newtab"+index,
                html:"new tab"+index,
                closable:true
           });
           tabsDemo.setActiveTab("newtab"+index);
           index++;
     }
     new Ext.Button({
         text:"添加新標(biāo)簽頁",
         handler:addTab
     }).render(document.body,"AddBtn");
});