PDA

View Full Version : Unable to get selected item from menu.



chinnib37
24 Apr 2013, 8:40 PM
Hi,

I am troubling to get the selected item id from menu.

my code is :


Ext.define('Mws.view.Header', {
extend: 'Ext.toolbar.Toolbar',
cls: 'header_bar',
layout: {
type: 'hbox',
align: 'stretch'
},




initComponent: function () {
console.log('header.js');
var me = this;


//To get activities
var activityItems = mwsData.get('activity');




/**
* To prepare activity menu
*/
getactivityMenuItems = function () {
this.mainMenu = new Ext.menu.Menu({
autoHeight: true,
style: {
'background-image': 'none'
},
defaults: {
xtype: 'menu',
floating: false,
columnWidth: 0.5,
hidden: false,
listeners: {
scope: this,
itemclick: function (item, e) {
this.menu.hide();
}
},
style: {
//'border-color': 'transparent'
'border': '0'
}
},
items: [{
items: this.getactivityItems(),
style: {
'border-right': '1px solid #E2E2E3'
}
}
]
});
return this.mainMenu;
},


getactivityItems = function () {
var appItems = [];
for (var key in activityItems {
console.diractivityItems[key]); appItems.push({
text: activityItems[key].name,


listeners: {
render: function (c) {
c.getEl().on('click', function () {
onAppItemClick(activityItems[key].id);
}, c);
},
}
});
}
return appItems;
},


onAppItemClick = function (activities) {
console.dir(activities);


},




me.items = [{
xtype: 'label',
text: ' Activity : ',
cls: 'labels',
}, {
xtype: 'splitbutton',
id: 'activity',
text: activityItems.name,
menu: getactivityMenuItems(),
}
];




me.callParent(arguments);
},
});


Here I am getting three items in menu
sell,buy,waste
on clicking on any item it is returning only last item id.
provide the solution for this.
Thanks.

suzuki1100nz
25 Apr 2013, 3:09 AM
Hi,
In the defaults config your xtype I think should be 'menuitem' not menu.
Don't arm an itemClick listener on every menu item. Arm a single click listener on the parent menu.
The menu click listener provides the menu item clicked on as the second parameter.

chinnib37
25 Apr 2013, 4:14 AM
Hi,
Thanks for the replay.
it is not working if I placed xtype as 'menuitem' and itemclick is also not working.

slemmon
26 Apr 2013, 8:17 AM
What about setting up the click listener on the menu using the menu's click event?
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.menu.Menu-event-click

That way the handler has access via passed params the menu itself, the menuItem clicked, and the click event.

suzuki1100nz
26 Apr 2013, 2:55 PM
Hi chinnib37,

Few things;
- I personally would avoid declaring inline functions within the initComponent function
- The itemClick listener is not required on the mainMenu that calls hide
- getactivityMenuItems function you declare items within items, not necessary and probably gave you the issue you fixed with the itemClick listener above
- Dont use id to identify a component use itemId

I've put a code sample below:

Ext.define('Mws.view.Header', {
extend: 'Ext.toolbar.Toolbar',
alias : 'widget.customToolbar',
cls: 'header_bar',
layout: {
type: 'hbox',
align: 'stretch'
},
activityItems : null,
//Items - add
items : [{
xtype: 'splitbutton',
itemId: 'activity',
text: 'Activity'
}],

initComponent: function () {
var me = this,
button = null;
me.callParent(arguments);

//Just for now hack some fixed data items
me.activityItems = ['Buy', 'Sell', 'Waste'];
//Find the button and add in the menu
button = me.down('#activity');
button.menu = me.createMenu();
},

createMenu : function(){
var me = this;
//Create the main menu
me.mainMenu = new Ext.menu.Menu({
items: me.getChildMenuItems(),
listeners : {
click : me.menuitemClicked
}
});
return me.mainMenu;
},

getChildMenuItems : function(){
var me = this,
items = me.activityItems,
childMenus = [];
//Create the child menus
for( var idx = 0; idx < items.length; idx++){
childMenus.push({
text : items[idx]
});
}
return childMenus;
},

menuitemClicked : function(menu, menuItem, eOpts){
console.log('Menu item clicked ' + menuItem.text);
}
});