tabPanel控件示例

 var tabpanel_order_list=new Ext.TabPanel({
        activeTab:0,    //设置默认选择的选项卡
      //   renderTo:'tabpanel',
        region:'center',
        width:'100%',
        autoDestroy : false,
        height:'100%',
        items:[
            {
                title:"<span style='font-size:14px;'>第一个选项</span>",
                // html:"列表",
                id : 'tab_list',
                items:[panel_order_list]
            }
        ]
    });
   
     viewport_order_list = new Ext.Viewport({
            enableTabScroll : true,
            layout:'border',
            items:[ tabpanel_order_list]
         });
  }
  //--------------------------------------------------------------设置第二个TabPanel----修改tab的表单
  function loadTab_update_list(){
      
       tabpanel_order_list.add({
                 title:"<span style='font-size:14px;'>第二个选项update</span>",
                id : 'tab_update_list',
                 closable: true ,
                items:[updateForm]
       });
  } 
  function loadTab_detail_list(){
     
       tabpanel_order_list.add({
                 title:"<span style='font-size:14px;'>第三个选项detail</span>",
                id : 'tab_detail_list',
                 closable: true ,
                items:[detailForm]
       });
  } 

 

切换选项卡： tabpanel_order_list.setActiveTab('tab_update_list');

转载于:https://www.cnblogs.com/summer520/archive/2013/06/05/3118817.html