Question

我在边框布局的中心区域有一个网格。在网格中单击特定项目时，我需要更改中心区域以显示选项卡面板。我无法获取tabpanel对象。

在ctrlpanel文件中，在网格侦听器上，我使用componentQuery来获取tabpanel（'ccmain'）对象。它返回undefined。

我正在使用componentQuery成功获取centerpanel文件中的'ccmain'（布局中心区域），但是当我将此代码移动到ctrlpanel文件（centerpanel中的一个项目）时，它失败了。 ComponentQuery不再返回tabpanel'ccmain'。 ComponentQuery确实返回了centerpanel或viewport。我尝试使用centerpanel或viewport.down来查找'ccmain'，但这也返回undefined。如果你能告诉我如何获得tabpanel或我做错了什么，我将不胜感激。谢谢你的时间。

ctrlPanel.js

Ext.define('ServcSol.view.CtrlPanel',{
extend: 'Ext.Panel',

alias: 'widget.ctrlPanel',
xtype: 'ctrlPanel',
itemId: 'ctrlPanel',

requires:[
    'ServcSol.store.FacilityStore'
    ],

initComponent: function () {  

var me = this;

Ext.applyIf(me, {

items: [ 
{
  xtype: 'panel',
  height: 750,
  title: 'Control Panel',
  items: [
  {
   xtype: 'gridpanel',
   padding: '20 20 5 20',
   store: 'WorkHistoryStore',
   height: 590,
   width: '100%',
   border: true,
   columns: [
   {
     width: 110,
     dataIndex: 'wrkhistDate',
     text: 'Due Date'
   },
   {
     width: 100,
     dataIndex: 'wrkType',
     text: 'Work Type'
   }
 ], 
 listeners : {
   itemclick: function(dv, record, item, index, e) 
   {
     if(record.get('wrkType') == 'Test')
         {                   
           var tabPanel = Ext.ComponentQuery.query('ccmain')[0];
           console.log('tabPanel is: ', tabPanel);
           var tabIndex = tabPanel.items.findIndex('id', 'hazard');
           var center = Ext.ComponentQuery.query('centerpanel')[0];
           center.getLayout().setActiveTab(tabIndex);
     }

ccmain.js

Ext.define('ServcSol.view.ccMain', {
extend: 'Ext.tab.Panel',
itemId: 'ccmain',
alias: 'widget.ccmain',
xtype: 'ccmain',

initComponent: function () {

var me = this;

Ext.applyIf(me, {
items: [
      {
        xtype: 'facility'
      },
      {
        xtype: 'hazListing'
      },
      {
        xtype: 'hazard'
      }, 
      {
        xtype: 'testFormRP'
      },
      {
        xtype: 'testFormDC'
      } 
       ]
    });      
  this.callParent(arguments);
  }
 });

Answer 1

其中一个原因可能是ccmain未实例化，因为ComponentQuery.query只能找到实例化的组件。然后，即使找到ccmain，您也无法以这种方式设置其活动项。最简单的方法是指定标签itemIds，然后调用setActiveTab：

tabPanel.setActiveTab(itemIdOfTheTab)

无法获取tabpanel的对象

1 个答案: