Events ExtJS 4可以';t从选项卡内部的组件侦听事件

Events ExtJS 4可以';t从选项卡内部的组件侦听事件,events,extjs,Events,Extjs,我定义了一个包含多个选项卡的tabpanel,在其中一个选项卡中,我有一个带有网格和其他内容的面板。我定义了一个控制器来从网格中获取事件。虽然我可以从面板中获取事件,但不可能从网格中获取事件 以下是视口的位置: Ext.define('test.MyViewport', { extend: 'Ext.container.Viewport', layout: 'fit', items: { xtype: 'tabpanel', items: [{

我定义了一个包含多个选项卡的tabpanel,在其中一个选项卡中,我有一个带有网格和其他内容的面板。我定义了一个控制器来从网格中获取事件。虽然我可以从面板中获取事件,但不可能从网格中获取事件

以下是视口的位置:

Ext.define('test.MyViewport', {
  extend: 'Ext.container.Viewport',

  layout: 'fit',

  items: {
      xtype: 'tabpanel',
      items: [{
          title: 'Tab 1',
          html: 'something'
      },{
          title: 'Tab 2',
          xtype: 'mypanel'
      },{
          title: 'Tab 3',
          html: 'something else 2'
      }]
  }
以下是小组讨论:

Ext.define('test.MyPanel', {
    extend: 'Ext.container.Container',
    alias: 'widget.mypanel',

    layout: {
        type: 'hbox',
        border: 1
    },

    items: [{
        xtype: 'mygrid',
        width: 300
    },{
        xtype: 'component',
        html: 'Hello There'
    }]
});
这是控制器:

Ext.define('test.MyController', {
    extend: 'Ext.app.Controller',

    init: function() {
        this.control({
            'mypanel': { show: function(){console.log( "Show Panel" );} },
            'mygrid': { show: function(){console.log( "Show Grid" );} }
        });  
    }
});
完整的代码可以在此环境中进行测试

我尝试了许多不同的选择器:

mypanel mygrid
#my-grid-id  (setting itemId on the grid item in the panel)
mypanel #my-grid-id
...
没有成功。我花了两天的时间在这个问题上,却不知道如何解决它。我应该为该特定视图启动不同的控制器吗?如果是,我应该把它放在哪里


非常感谢

选择器正常,问题是网格的
show
事件从未触发。选项卡布局确实调用了其直接子级的
show()
方法,该方法触发
show
事件,但大多数布局都没有

通过直接在网格定义中添加侦听器,可以确认从未触发网格的
show
事件:

{
    xtype: 'mygrid',
    width: 300,
    height: 200,
    listeners: {
        // won't happen
        show: function() { alert('Grid show event') }
    }
}
您可以通过侦听其他事件来确认您的控制方法已正确捕获对网格的引用:

    this.control({
        'mypanel': { show: function(){console.log( "Show Panel" );} },
        // will happen when you click on the grid's body
        'mygrid': { containerclick: function(){console.log( "Grid clicked" );} }
    });  

嗯,这只是布局的工作方式

演示的卡布局将隐藏“test.MyPanel”,因此每次激活该选项卡时都会调用
show()
,但(幸运的是)并非所有的“test.MyPanel”组件子组件都会这样做

为什么??因为没有必要


它们本身并不是直接隐藏的,只是通过它们的所有者容器,因此不会被调用,因此事件也不会被触发。这就是布局的工作方式。因此,如果您将网格作为直接子级放置到选项卡中,那么show事件也会被触发。看到这个分叉的

+1我喜欢小提琴的工作示例!非常感谢,这就是答案。