PDA

View Full Version : menu as toolbar items and context menu items



nurhadijogja
22 Jan 2013, 8:09 PM
hi all, I have some problem when creating a gridpanel with toolbar and contextmenu (MVC architecture). my problem is I need the toolbar and context menu have same items (I just create one view).

my code: (view - menu)

Ext.define("MyMenu", {
extend: "Ext.menu.Menu",
alias: "widget.mymenu",
items: [
{
text: "Detail",
action: "detail"
},
{
text: "Edit",
action: "edit"
}
]
});


and my grid panel:


Ext.define("MyGrid", {
extend: "Ext.grid.Panel",
....
dockedItems: [
{
xtype: "mymenu",
dock: "top"
}
],
listeners: {
itemcontextmenu: function(view, record, html, index, e){
var menu = Ext.widget("mymenu");
e.stopEvent();
menu.showAt(e.getXY());
}
}
});


this code is works, contextmenu is appear - but dockedItems not rendered. when I change "extend" property (in MyMenu) to "Ext.toolbar.Toolbar", dockedItems is rendered but context menu not appear.
(sorry for my English)

friend
23 Jan 2013, 11:13 AM
The base component added to dockedItems (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-cfg-dockedItems) is typically an Ext.toolbar.Toolbar. The Toolbar then acts as the container for your menu, buttons, etc.

So your grid's dockedItems config, should look something more like this:



dockedItems: [{
xtype: "toolbar",
dock: "top",
items: [{
xtype: 'mymenu'
}]
}]

nurhadijogja
24 Jan 2013, 6:54 PM
hi friend, thank you for reply..
i was try your solution and the toolbar was rendered, but 'mymenu' not shown.

and when i try to add a button in toolbar, the button is shown but not for 'mymenu'.


dockedItems: [{
xtype: "toolbar",
dock: "top",
items: [
{xtype: 'Added Button'},
{xtype: 'mymenu'}
]
}]

'mymenu' not shown.

nurhadijogja
24 Jan 2013, 11:10 PM
hi,, I have an answer, but I don't know what is the best practice...


{
xtype: "toolbar",
dock: "top",
listeners: {
beforerender: function(){
var menus = Ext.widget("mymenu").items,
items = (typeof menus != "undefined") ? menus.items : null;

if(items != null){
for(var i=0; i<items.length; i++){
this.add({
text: items[i].text,
action: items[i].action,
menu: items[i].menu
});
}
}
}
}
}

xava
2 May 2013, 11:21 AM
for me, that worked

view/menu/Client.js


Ext.define("AF.view.menu.Client", {
extend: 'Ext.menu.Menu',

alias: 'widget.menuclient',

text: 'Clientes',

style: {
overflow: 'visible' // For the Combo popup
},

items: [
{
text: 'I like Ext'
}, '-', {
text: 'Radio Options'
},{
text: 'Choose a Date',
iconCls: 'calendar'
},{
text: 'Choose a Color'
}
]
});



view/menu/Menu.js


Ext.define("AF.view.menu.Menu", {
extend: 'Ext.toolbar.Toolbar',

alias: 'widget.menuToolbar',

requires:[
'AF.view.menu.Client'
],

initComponent: function() {

this.items = {
text: 'Prueba',
menu: {
xtype: 'menuclient'
}
};

this.callParent();
}

});

chamacs
2 May 2013, 11:36 AM
The difference in the last post and the original. The menu is added to a button on the toolbar. This allows the menu to 'drop down' from the button.

Can a menu by itself even be added to a toolbar?

xava
2 May 2013, 11:56 AM
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.menu.Menu
(http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.menu.Menu)
this for sure will respond your question, if i undestand good

nurhadijogja
2 May 2013, 11:27 PM
hi xava, what you say is that a menu as submenu of toolbar item (Prueba).
I want that menu items to be toolbar items (chamacs said).


I use Ext 4.1 (for 4.2 haven't tried)

xava
3 May 2013, 3:45 AM
Hi,

i use 4.2, but check it

view/menu/Menu.js Work!


Ext.define("AF.view.menu.Menu", {
extend: 'Ext.toolbar.Toolbar',

alias: 'widget.menuToolbar',

requires:[
'AF.view.menu.Client'
],

initComponent: function() {

this.items = {
text: 'Prueba',
menu: {
xtype: 'menuclient'
}
};

this.callParent();
}

});



view/menu/Menu.js Don't Work!


Ext.define("AF.view.menu.Menu", {
extend: 'Ext.toolbar.Toolbar',

alias: 'widget.menuToolbar',

requires:[
'AF.view.menu.Client'
],

items = [{
text: 'Prueba',
menu: {
xtype: 'menuclient'
}
}];


});



The diference is in use the initComponent() function, to call the xtype 'menuclient', outside din't work, is like the View or Alias isn't defined yet