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

Ext.onReady(function(){
     var tabsDemo=new Ext.TabPanel({
            renderTo:Ext.getBody(),
            width:300,
            activeTab:0,//當前激活標簽
            frame:true,
            items:[{
                      contentEl:"tabOne",//標簽頁的頁面元素id(加入你想顯示的話)
                      title:"浪曦",
                      closable:true//是否現實關閉按鈕,默認為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類型,設為x-hide-display,以正常顯示-->

在這里例舉幾個參數:
//幾個相關參數
1.tabPosition:"bottom"//選項卡的位置,枚舉值bottom,top.默認為top(只有top的時候才能選項卡的滾動!)
2.tabTip:"提示"//必須先調用Ext.QuickTips.init();才有效果

經常我們有這么個情況,一個選項卡加載一個頁面,這里我提供一種不是很好但是很穩定的簡單方法(已經在項目中驗證沒有出現問題).
就是:使用iframe作為tab的標簽頁內容.
2.動態添加tabpanel的標簽頁

html代碼：

<body style="margin:10px;">
    <div>
    <a id="AddNewTab" href="javascript:void(0)">添加新標簽頁</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簡單頁面演示",
                      autoLoad:{url:"tab1.htm",scripts:true}
            }]
     });
     //下面是添加新標簽頁的關鍵代碼,很簡單方便     
     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++;
     })
});

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

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

我就不多說了，關鍵的幾個參數注釋了下
<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,寬度能自動變化,但是影響標題的顯示
            activeTab:0,
            height:200,
            enableTabScroll:true,//擠的時候能夠滾動收縮
            width:200,
            frame:true,
            items:[{
                      title:"tab advantage",
                      html:"sample1"
            }]
     });
     
     var index=0;
     
     //就是下面這個函數,關鍵的地方,非常簡單也非常實用
     function addTab()
     {
         tabsDemo.add({
                title:"newtab",
                id:"newtab"+index,
                html:"new tab"+index,
                closable:true
           });
           tabsDemo.setActiveTab("newtab"+index);
           index++;
     }
     
     //設置一個按鈕(上面的是一個鏈接,應用有點不同哦)
     new Ext.Button({
         text:"添加新標簽頁",
         handler:addTab
     }).render(document.body,"AddBtn");
});
4.為tabpanel標簽頁添加右鍵菜單


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

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

            //下面是比上面例子新增的關鍵右鍵菜單代碼
            listeners:{
                     //傳進去的三個參數分別為:這個tabpanel(tabsDemo),當前標簽頁,事件對象e
                    "contextmenu":function(tdemo,myitem,e){
                                menu=new Ext.menu.Menu([{
                                         text:"關閉當前頁",
                                         handler:function(){
                                            tdemo.remove(myitem);
                                         }
                                },{
                                         text:"關閉其他所有頁",
                                         handler:function(){
                                            //循環遍歷
                                            tdemo.items.each(function(item){
                                                 if(item.closable&&item!=myitem)
                                                 {
                                                    //可以關閉的其他所有標簽頁全部關掉
                                                    tdemo.remove(item);
                                                 }
                                            });
                                         }
                                },{
                                         text:"新建標簽頁",
                                         handler:addTab
                                }]);
                                //顯示在當前位置
                                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:"添加新標簽頁",
         handler:addTab
     }).render(document.body,"AddBtn");
});