JavaScript
Run Code
Open in Fiddle
Ext.create('Ext.panel.Panel', { renderTo: Ext.getBody(), id: 'mainPanel', width: '100%', height: 200, title: 'Application Users', name: 'banner', reference: 'banner', tools: [{ xtype: 'button', iconCls: 'x-fa fa-bars', handler: function (btn) { console.log('button clicked'); btn.down('menu').show(); }, items: [{ xtype: 'menu', items: [{ text: 'English' }] }] }], // layout: { // type: 'hbox', // align: 'stretch' // }, items: [{ xtype: 'container', flex: 1 }, { xtype: 'panel', width: 300, height: 54, border: true, title: 'menu', constrain: true, constrainTo: Ext.getCmp('mainPanel'), renderTo: Ext.getCmp('mainPanel'), listeners: { 'render': { fn: function () { this.body.on('click', this.handleClick, this); }, single: true, } }, handleClick: function (e, t) { //alert('hello'); var testpanel = this.up('panel[name="banner"]'); if (testpanel != null) { alert('there'); var optionmenu = testpanel.lookup('optionmenu'); if (optionmenu != null) { alert('here'); optionmenu.setVisible(true); } } } }, { xtype: 'menu', reference: 'optionmenu', minWidth: 150, items: [{ text: 'English', group: 'language', }, { text: 'French - overflowing text because too long', group: 'language', }, '-', { text: 'logout', iconCls: 'x-fa fa-sign-out', }] } // {xtype: 'app-optionmenu'} ] });