Question

我定义了一个带有几个标签的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" );} }
        });  
    }
});

可以在此fiddle中测试完整代码。

我尝试了很多不同的选择器：

mypanel mygrid
#my-grid-id  (setting itemId on the grid item in the panel)
mypanel #my-grid-id
...

没有成功。我已经花了两天时间在这上面，并不知道如何解决它。我应该为该特定视图启动不同的控制器吗？如果是这样我应该把它放在哪里？

非常感谢

Answer 1

嗯，这就是布局的方式......

您的演示的卡片布局将隐藏'test.MyPanel'，因此每次激活标签时都会调用show()但是（幸运的是）没有为所有'test.MyPanel'组件子元素执行。

为什么呢？因为没有必要。

他们不是直接隐藏自己，只是通过他们的所有者容器和因此显示永远不会被调用，所以事件永远不会被解雇。这就是布局的工作方式。因此，如果将网格作为直接子项放入选项卡，则show事件也会被触发。请参阅此分叉 JSFiddle

Answer 2

选择器没问题，问题是网格的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" );} }
    });

ExtJS 4无法从标签内的组件中侦听事件

2 个答案: