ExtJS 4不能監聽組件內部的事件

我定義了一個包含多個選項卡的tabpanel，其中一個選項卡中有一個面板，其中包含網格和其他內容。我定義了一個控制器來從網格中獲取事件。雖然我可以從面板中獲取事件，但無法從網格中獲取事件。ExtJS 4不能監聽組件內部的事件

這裏的視在這裏：

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 
...

沒有成功。我已經花了兩天的時間對此沒有線索瞭解如何解決。我應該爲該特定視圖啓動一個不同的控制器嗎？如果是的話我應該把它放在哪裏？

非常感謝

來源

2013-06-01 jclisbon

+1我喜歡在小提琴的工作示例！ – rixo

嗯，這是現在的樣子佈局炒菜......

卡外行在你的演示中將隱藏'test.MyPanel'，所以每次標籤被激活時都會調用show()，但是幸運的是，這並不是所有的'test.MyPanel'組件子項都完成的。

爲什麼？因爲這不是必需的。

他們不直接隱藏自己，只能通過他們的主人容器和因此顯示永遠不會被調用，所以事件永遠不會被解僱。這只是佈局的工作方式。因此，如果您將柵格作爲直接子項放入選項卡，則也會觸發show事件。看到這分叉JSFiddle

來源

2013-06-01 15:33:18 sra

非常感謝Thanky的答案。 – jclisbon

@jclisbon不客氣;） – sra

的選擇是好的，問題是網格的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");} } 
    });

來源

2013-06-01 13:04:38 rixo

ExtJS 4不能監聽組件內部的事件

回答

相關問題