PDA

View Full Version : How to add menu items and set event handler



filippo.ferrari
12 Jul 2013, 1:20 AM
I want to add some menu items dinamically to an Ext.menu.Menu

My flow is:

- listen to an event (ok)
- add menu items in a controller Action (ok)
- add some event bindings for my menu items that are methods of the same controller (:-/)

My controller acttion:


onMyPanelExpand: funcion(p, eOpts){
// one time code
++ Ch.firstExpandFiltri;
if (Ch.firstExpandFiltri == 1){

me = this;

me.getReportMenu().add(
{
xtype: 'menuitem',
itemId: 'meStampa'
},
{
xtype: 'menuitem',
itemId: 'meFiltroPdf'
},
{
xtype: 'menuitem',
itemId: 'meFiltroExcel'
}
);
// ok items are added

// Abilito il menu
me.getReportMenu().setDisabled(false);
// Ok menu are enabled


// try to add refs !!! but but no autogenerated getter
me.addRef(
{
ref: 'meFiltroPdf',
selector: '#meFiltroPdf'
},
{
ref: 'meFiltroExcel',
selector: '#meFiltroExcel'
},
{
ref: 'meStampa',
selector: '#meStampa'
}
);


// Try via component query still doesn't work
p.down('#meFiltroPdf').on({
'click': Ext.bind(me.stampaReport,me,['pdf','null']),
scope: me
});


p.down('#meFiltroExcel').on({
'click': Ext.bind(me.stampaReport,me,['xls','null']),
scope: me
});

p.down('#meStampa').on({
'click': Ext.bind(me.stampaHtml,me),
scope: me
});

}
}

julio.batista
12 Jul 2013, 3:08 AM
What happen if you use me.getReportMenu().down() instead of p.down()?

filippo.ferrari
12 Jul 2013, 3:41 AM
Now works, problem is that works so:



// Add events
me.getReportMenu().down('#meFiltroPdf').on({
'click': Ext.bind(me.stampaReport,me,['pdf','null']),
scope: me
});


p.down('#meFiltroExcel').on({
'click': Ext.bind(me.stampaReport,me,['xls','null']),
scope: me
});



It works with both, also with p.down....

Maybe the problem was that me.getReportMenu().add(); not still rendered my buttons when I try to add listeners?

filippo.ferrari
12 Jul 2013, 4:10 AM
And why I can't add a ref and use the getter:



me.getReportMenu().add(
{
xtype: 'menuitem',
itemId: 'meFiltroPdf',
icon: 'images/icons/acrobat.png',
text: 'PDF Report'
}
);

me.addRef(
{
ref: 'meFiltroPdf',
selector: '#meFiltroPdf'
}
);

// event that works
/*
me.getReportMenu().down('#meFiltroPdf').on({
'click': Ext.bind(me.stampaReport,me,['pdf','null']),
scope: me
});
*/

// the follow doesn't work
console.log(me.getMeFiltroPdf());
console.log(me);
me.getMeFiltroPdf().on({
'click': Ext.bind(me.stampaReport,me,['pdf','null']),
scope: me
});

slemmon
16 Jul 2013, 11:50 AM
It looks like there is a bug with addRef. It won't accept an object - requires an array of ref config objects instead.
EXTJSIV-10682




Ext.define('Test.controller.Main', {
extend: 'Ext.app.Controller',
refs: [{
ref: 'ReportsMenu',
selector: '#reportsMenu'
}],
init: function () {
var me = this;


me.control({
'#addRef': {
click: me.addMenuItems
}
});
},
addMenuItems: function () {
var me = this,
reportsMenu = me.getReportsMenu();


reportsMenu.add([{
text: 'Two',
itemId: 'meStampa'
}, {
text: 'Three',
itemId: 'meFiltroPdf'
}, {
text: 'Four',
itemId: 'meFiltroExcel'
}]);


me.addRef([{
ref: 'meFiltroPdf',
selector: '#meFiltroPdf'
}]);


console.log(me.getMeFiltroPdf());
}
});




Ext.application({
name: 'Test',


controllers: ['Main'],

launch: function () {


Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));


Ext.widget('button', {
renderTo: document.body,
text: 'Add Items / Ref',
itemId: 'addRef'
});


Ext.widget('menu', {
renderTo: document.body,
itemId: 'reportsMenu',
margin: '10 0 0 0',
floating: false,
height: 300,
width: 200,
items: [{
text: 'One'
}]
});


}
});

filippo.ferrari
25 Jul 2013, 11:11 PM
Perfect with the array in config.

Thanks