ExtJs学习笔记(8)_TabPanel的用法

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" />
     < link  rel ="stylesheet"  type ="text/css"  href ="../resources/css/ext-all.css"   />
      < script  type ="text/javascript"  src ="../adapter/ext/ext-base.js" ></ script >
     < script  type ="text/javascript"  src ="../ext-all.js" ></ script >  
     < style  type ="text/css" >
        * { font-size : 12px ; line-height : 130% ; }                 
        .list  { list-style : square ; width : 500px ; padding-left : 16px ; }
        .list li { padding : 2px ; font-size : 8pt ; }

        pre  {
           font-size : 11px ;  
         }

        .x-tab-panel-body .x-panel-body  {
            padding : 10px ;
         }

         /*  default loading indicator for ajax calls  */
        .loading-indicator  {
            font-size : 8pt ;
            background-image : url('../resources/images/default/grid/loading.gif') ;
            background-repeat :  no-repeat ;
            background-position :  left ;
            padding-left : 20px ;
         }

        .new-tab  {
            background-image : url(../examples/feed-viewer/images/new_tab.gif) !important ;
         }

        .tabs  {
            background-image : url( ../examples/desktop/images/tabs.gif ) !important ;
         }
     </ style >
     < title > Tabs Demo </ title >
</ head >
< body >
< script  type ="text/javascript" >
    Ext.onReady( function () {

         var  tabs  =   new  Ext.TabPanel({
            renderTo: Ext.getBody(),
            resizeTabs:  true ,  //  turn on tab resizing
            minTabWidth:  115 ,
            tabWidth:  135 ,
            enableTabScroll:  true ,
            width:  600 ,
            height:  150 ,
            defaults: { autoScroll:  true  },
            plugins:  new  Ext.ux.TabCloseMenu(),
            tbar: [{ text:  ' 新建Tab ' , iconCls:  ' new-tab ' , handler: addTab}]

        });

         //  tab generation code
         var  index  =   0 ;
         while  (index  <   2 ) {
            addTab();
        }

         function  addTab(tab) {
             if  (tabs.items.length  >   9 ) {
                Ext.MessageBox.alert( " 提示 " ,  " 最多只能新建10个tab! " );
                 // tabs.tbar.setVisible(false);
                 return   false ;
            }
            tabs.add({
                title:  ' New Tab  '   +  ( ++ index),
                iconCls:  ' tabs ' ,
                html:  ' Tab Body  '   +  (index) ,
                closable:  true
            }).show();
        }

    });

   

     // 右键弹出菜单
    Ext.ux.TabCloseMenu  =   function () {
         var  tabs, menu, ctxItem;
         this .init  =   function (tp) {
            tabs  =  tp;
            tabs.on( ' contextmenu ' , onContextMenu);
        }

         function  onContextMenu(ts, item, e) {
             if  ( ! menu) {  //  create context menu on first right click
                menu  =   new  Ext.menu.Menu([{
                    id: tabs.id  +   ' -close ' ,
                    text:  ' 关闭当前 ' ,
                    handler:  function () { tabs.remove(ctxItem); }
                }, {
                    id: tabs.id  +   ' -close-others ' ,
                    text:  ' 关闭其它 ' ,
                    handler:  function () {
                        tabs.items.each( function (item) {
                             if  (item.closable  &&  item  !=  ctxItem) {
                                tabs.remove(item);
                            }
                        });
                    }
}]);
                }
                ctxItem  =  item;
                 var  items  =  menu.items;

                items.get(tabs.id  +   ' -close ' ).setDisabled( ! item.closable);               

//                 //只剩一个时，禁止关闭
//                 if (tabs.items.length == 1) {                   
//                     items.get(tabs.id + '-close').setDisabled(true);
//                 }                

                 var  disableOthers  =   true ;
                tabs.items.each( function () {
                     if  ( this   !=  item  &&   this .closable) {
                        disableOthers  =   false ;
                         return   false ;
                    }
                });
                items.get(tabs.id  +   ' -close-others ' ).setDisabled(disableOthers);
                menu.showAt(e.getPoint());
            }
        };
</ script >
</ body >
</ html >