從視圖訪問視口中心區域並更改活動項目

Question

我想從ToolBarView中獲取視口 - >中心區域的引用，當單擊工具欄中的註銷按鈕時，視口card0中的中心區域應設置爲activeItem。請有人幫助我。

//查看

Ext.define('MyApp.view.ToolBarView', { 

    extend: 'Ext.toolbar.Toolbar', 
    xtype: 'bottom-toolbar', 
    alias: 'widget.toolBar', 
    height: 40,  
    items: [ 
      { 
       xtype: 'tbfill' 
      }, 
      { 
       text: 'Home' 
      }, 
      { 
       xtype: 'tbseparator'       
      }, 

      { 

       xtype: 'button', 
       text: 'Settings', 
       scale: 'medium', 
       menu: [{ 
         text:'My Profile' 
        },{ 
         text:'Change Password' 
        },{ 
         text:'View Options' 
        }] 

      }, 
      { 
       xtype: 'tbseparator' 
      }, 
      { 
       text: 'Logout', 
       handler: function() { 
        Ext.Msg.alert('Are you sure you want to logout??'); 
        tex = button.up('toolbar'),//here i need to change viewport activeItem 
        tex.close()//close this toolbar view and logout and show loginView(card 0) 
       } 
      }    
      ] 

}); 


//My Viewport is 
Ext.define('MyApp.view.Viewport', { 
    extend: 'Ext.container.Viewport', 
    layout: 'border',  
    requires: [ 
     'MyApp.view.LoginView', 
     'MyApp.view.GridView', 
     'MyApp.view.RegisterForm', 
     'MyApp.view.TabView',  
     'MyApp.view.ToolBarView'   
    ],   
    items: [ 
    { 
     region: 'north', 
     border: false,  
     items:[ 
      { xtype: 'image', 
       src: 'images/logo.jpg', 
       width:200, 
       height:63 
      }   
      ] 
    }, 
    { 
     region: 'south', 
     html: 'Hello', 
     xtype: 'toolbar', 
     height: 25 

    }, 
    { 
     region: 'center', 
     layout: 'card', 
     activeItem: 0, 

     items: 
      [{ 

       id: 'card0', 
       xtype: 'container', 
       items:[ {xtype: 'loginView'}], 
       region: 'center',    

       layout: { 
        type: 'vbox', 
        align: 'center', 
        pack: 'center' 
       } 
      }, 
      { 
       id: 'card1', 
       xtype: 'container', 
       items:[ {xtype: 'registerForm'}], 
       layout: { 
        type: 'vbox', 
        align: 'center', 
        pack: 'center' 
       } 

      }, 
      { 
       items:[ 
        {xtype: 'toolBar'},// this is the toolbar from which i need to access viewport and change the activeItem 
        {xtype: 'gridView'}, 
        {xtype: 'tabView'} 
       ] 
      }] 
    }] 

}); 

Answer 1

爲了動態設置銀行卡，您將要使用的setActiveTab（請注意，它出現setActiveItem將努力，但它沒有記錄。）方法tabpanel組件。

我會建議添加一個itemId到tabpanel，以方便查詢，否則你會想要從點擊事件監聽器/處理程序中的按鈕上移或下移。

Ext.ComponentQuery.query('#myItemId')[0].setActiveTab(0);

And here is a fiddle that shows a working example.

而且從小提琴的代碼對本網站參考：

Ext.create('Ext.tab.Panel',{ 
      renderTo:Ext.getBody(), 
      title:'My Tab Panel', 
      itemId:'myTabPanel', 
      tbar:['->',{ 
       text:'Logout', 
       handler:function(btn){ 
        Ext.ComponentQuery.query('#myTabPanel')[0].setActiveTab(0); 
       } 
      }], 
      items:[{ 
       title:'Tab 1', 
       html:'<h1>First Tab</h1>' 
      },{ 
       title:'Tab 2', 
       html:'<h1>Second Tab</h2>' 
      }] 
     });