PDA

View Full Version : menu xtype question



Mark Hagerman
24 Apr 2012, 6:57 PM
I'm trying to configure a menu as one of the items in a panel, but the 'menu' xtype doesn't seem to be respected. My code (just experimental proof-of-concept stuff, for now):


Ext.define
( 'Lab.view.DBPanel',
{ extend: 'Ext.panel.Panel',
alias: 'widget.db-panel',
layout: {type: 'fit'},
border: true,
draggable: false,
requires:
[
'Lab.view.DBGrid'
],
items:
[
{
xtype: 'db-grid',
itemId: 'grid'
},
{
xtype: 'menu',
itemId: 'contextmenu',
floating: true,
items:
[
{text: 'This'},
{text: 'That'},
{text: 'Other thing'}
]
}
],
dockedItems:
[
{ dock: 'bottom', xtype: 'button', text: 'Add a book', maxWidth: 72 }
],


initComponent: function()
{
var me = this,
theGrid,
theMenu;


debugger;
this.callParent();
theGrid = this.getComponent('grid');
theMenu = this.getComponent('contextmenu');
theGrid.mon(theGrid, 'select', me.logSelection, me);
theMenu.mon(theMenu, 'itemcontextmenu', me.showMenu, me);
},


logSelection: function(t, r, i, e)
{
console.log('Row ' + i + ': record ' + t.getSelection()[0].get('recnbr') + ' selected...');
},

showMenu: function(t, r, i, n, e, o)
{
console.log('Right click served by DBPanel...');
}
},
function ()
{
console.log("Class " + this.getName() + " created...");
}
);

evant
24 Apr 2012, 7:23 PM
From the docs:



This is a base class for layouts that contain a single item that automatically expands to fill the layout's container. This class is intended to be extended or created via the layout: 'fit' Ext.container.Container.layout config, and should generally not need to be created directly via the new keyword.


If you just want to float the menu at certain times, don't include it in the items collection.

vietits
24 Apr 2012, 7:30 PM
You config menu as floating component. From document: "Floating components do not participate in the Container's layout. Because of this, they are not rendered until you explicitly show (file:///D:/Prog/script/sencha.com/extjs-4.1.0-rc3/docs/index.html#!/api/Ext.Component-method-show) them.". So, to show the menu, you should either config its floating to false or autoShow to true or call to show it at some point in your code.


xtype: 'menu',
itemId: 'contextmenu',
floating: true,
autoShow: true,
items:[
{text: 'This'},
{text: 'That'},
{text: 'Other thing'}
]

Or


xtype: 'menu',
itemId: 'contextmenu',
floating: false,
items:[
{text: 'This'},
{text: 'That'},
{text: 'Other thing'}
]

Mark Hagerman
25 Apr 2012, 6:16 AM
The idea is to create the component, but not render it to the browser until the user does a right-click. I have code elsewhere to show the menu, but it doesn't work because the menu is never created. I think Evan T called it; because the panel's layout is 'fit', the second item can't be created.