JavaScript
Run Code
Open in Fiddle
Ext.application({ name : 'Fiddle', launch : function() { /* var getMenu = function (cmp) { var menu = cmp.down('menu'); if (!menu) { menu = Ext.create('Ext.menu.Menu', { itemId: 'banneroptionmenu', items: [{ text: 'Text 1' },{ text: 'Text 2' }] }); } return menu; }; */ Ext.create('Ext.panel.Panel', { height: 200, width: 1000, renderTo: document.body, itemId: 'mainPanel', flex:1, layout: { type: 'hbox', align:'stretch' }, items:[ {xtype: 'container',flex:1}, { reference: 'bannerleftpanel', xtype: 'panel', width: 700, //style :"background-color: black;", bodyStyle : 'background: black;', layout: { type:'hbox', align : 'stretch' }, }, { xtype: 'panel', itemId: 'buttonPanel', width: 60, bodyStyle : 'background: blue;', layout: { type: 'vbox', align : 'stretch' }, items:[ {xtype: 'container',flex:1}, { xtype: 'panel', width: 54, height: 54, //title: 'click zone', renderTo: document.body, bodyStyle : 'background: red;', listeners: { 'render': { fn: function() { this.body.on('click', this.handleClick, this); }, single: true, } }, handleClick: function(e, t){ var mainPanel = this.up('#mainPanel'); var buttonPanel = this.up('#buttonPanel'); if(mainPanel != null) { var banneroptionmenu = mainPanel.lookupReference('banneroptionmenu'); if (banneroptionmenu == null) { //alert('hello'); banneroptionmenu = Ext.create('Ext.menu.Menu', { itemId: 'banneroptionmenu', items: [{ text: 'Text 1' },{ text: 'Text 2' }] }); } banneroptionmenu.showBy(buttonPanel,'tr-br?'); } } }, {xtype: 'container',flex:1}, ] }, {xtype: 'container',flex:1}, ] }); } });