JavaScript
Run Code
Open in Fiddle
Ext.application({ name : 'Fiddle', launch : function() { Ext.widget('viewport', { items: [{ xtype: 'component', margin: 10, html: '<b>Study code then Click!</b>' },{ xtype: 'parentctn', defaults: { margin: 10 }, items: [{ xtype: 'myctn2', },{ xtype: 'myctn3' },{ xtype: 'myctn4' }] },{ xtype: 'component', margin: 10, html: '<b>Conclusion</b>: for declarative listeners, first ViewController ' + 'up the component tree is examined for presence of listener handler; ' + 'if a VC is found, but not the method, an error is thrown during ' + 'exeuction time. Hence, it is safest to only rely on declarative ' + 'view listeners so long as they are only expected to be in the ' + 'view\'s own VC' }] }); } }); // "Parent" container and its VC Ext.define('ParentCtn', { extend: 'Ext.Container', xtype: 'parentctn', controller: 'parentctn' }); Ext.define('ParentCtnVC', { extend: 'Ext.app.ViewController', alias: 'controller.parentctn', control: { button: { click: 'onClickControl' } }, onClick: function() { alert('CLICK in parent VC via declarative listener in view!'); }, onClickControl: function() { alert('CLICK in parent VC via control:!'); } }); // "Child" container with button and VC with onClick Ext.define('MyCtn2', { extend: 'Ext.Container', xtype: 'myctn2', controller: 'myctn2', items: { xtype: 'button', text: 'MyCtn2: Has VC', handler: 'onClick' } }); Ext.define('MyCtn2VC', { extend: 'Ext.app.ViewController', alias: 'controller.myctn2', control: { button: { click: 'onClickControl' } }, onClick: function() { alert('CLICK in my VC via declarative listener!'); }, onClickControl: function() { alert('CLICK in my VC via control:!'); } }); // Another "Child" container with a button, but no VC Ext.define('MyCtn3', { extend: 'Ext.Container', xtype: 'myctn3', items: { xtype: 'button', text: 'MyCtn3: Does NOT have VC', handler: 'onClick' } }); // Another "Child" container with a button, and a VC, but no onClick in VC Ext.define('MyCtn4', { extend: 'Ext.Container', xtype: 'myctn4', controller: 'myctn4', items: { xtype: 'button', text: 'MyCtn4: Has VC without onClick (will error - see console)', handler: 'onClick' } }); Ext.define('MyCtn4VC', { extend: 'Ext.app.ViewController', alias: 'controller.myctn4' });