PDA

View Full Version : Dynamic function name



kabkab
10 Oct 2012, 7:27 AM
Hi,
I'm trying to build a dynamic menu from json file.

var tb = Ext.create('Ext.toolbar.Toolbar', {
floating: false,
id: 'menuToolbar',
cls: 'appMenu',
height: 30,
items: [], // dynamically built below
listeners: {
beforerender: function() {
var navStore = Ext.create('Ext.data.Store', {
fields: ['text'],
proxy: {
type: 'ajax',
url: '/app/lemenu.php',
reader: {
type: 'json',
root: 'navigation'
}
},
autoLoad: true,
listeners: {
load: function(store,records,success,operation,opts) {
var i=0;
var toolbar = Ext.getCmp('menuToolbar');
// First the top level items
store.each(function(record) {
var menu = Ext.create('Ext.menu.Menu');
Ext.each(record.raw.menu, function(item){
menu.add({
text: item.text,
xtype: item.xtype,
handler: function(){callFunction(item.handler)}
})

})
toolbar.add({
xtype: 'button',
text: record.data.text,
handler: function(){callFunction(item.handler)}

});
i++;
});
}
}
});
}
}
});
I know that my code is not great (I picked it up from a sample) because I didn't find something usable in this forum.
My menu start to work but I need that every button have its own handler. I don't know how to do that.

Thanks,

scottmartin
10 Oct 2012, 9:36 AM
Perhaps you would be interested in this:
http://www.sencha.com/forum/showthread.php?132422

You could also use bind:
handler: Ext.Function.bind(me.myfunction, me, ['myData'], true)

Scott.

vietits
10 Oct 2012, 5:42 PM
Maybe this is what you need:


var tb = Ext.create('Ext.toolbar.Toolbar', {
floating: false,
id: 'menuToolbar',
cls: 'appMenu',
height: 30,
items: [], // dynamically built below
// define menu handlers
handler1: function(){...},
handler2: function(){...},
handler3: function(){...},
....
listeners: {
beforerender: function() {
var toolbar = this;


var navStore = Ext.create('Ext.data.Store', {
fields: ['text'],
proxy: {
type: 'ajax',
url: '/app/lemenu.php',
reader: {
type: 'json',
root: 'navigation'
}
},
autoLoad: true,
listeners: {
load: function(store,records,success,operation,opts) {
var i=0;
var toolbar = Ext.getCmp('menuToolbar');
// First the top level items
store.each(function(record) {
var menu = Ext.create('Ext.menu.Menu');
Ext.each(record.raw.menu, function(item){
menu.add({
text: item.text,
xtype: item.xtype,
// handler: function(){callFunction(item.handler)}
handler: toolbar[item.handler]
})

})
toolbar.add({
xtype: 'button',
text: record.data.text,
// handler: function(){callFunction(item.handler)}
handler: toolbar[item.handler]
});
i++;
});
}
}
});
}
}
});

kabkab
12 Oct 2012, 4:28 AM
Hi,
Thank you,
scottmartin: the link you gave is very interesting but I'm using ExtJs 4 so wenh I click on menu -> Remove category I get TypeError: g.el is null.
About bind, I didn't understand how to use it.

vietits: I tried your method but I didn't understand the lines

handler1: function(){...}, handler2: function(){...},
So it didn't do anything.

vietits
12 Oct 2012, 4:46 AM
@kabkab,

handler1, handler2, ... are just menu handler that will be called when a menu item or toolbar button is clicked. Here I just use handler1, handler2,... as example. In fact, you will name them to match item.handler of each menu item.

kabkab
14 Oct 2012, 5:44 AM
Hi,
Because I really didn't understand how to use the methods proposed here, I wrote my code like this :



handler: function(){
var tmpFunc = new Function(item.handler+'()');
tmpFunc();
}

It works. Do you think it's true or am I wrong?

vietits
14 Oct 2012, 3:49 PM
No, this is not what I meant. What I mean is handler1, handler2, etc are menu handlers that are called when a menu item is clicked. You can name them with any name you like, not nescessary to be handler1, handler2, etc. Then, you only need to assign these name to 'handler' field for each record in store.


var tb = Ext.create('Ext.toolbar.Toolbar', {
floating: false,
id: 'menuToolbar',
cls: 'appMenu',
height: 30,
items: [], // dynamically built below
// define menu handlers
fileMenu: function(){...},
saveMenu: function(){...},
editMenu: function(){...},
....
listeners: {
beforerender: function() {
var toolbar = this;
var navStore = Ext.create('Ext.data.Store', {
fields: ['text', 'xtype', 'handler'], // added xtype and handler fields
proxy: {
type: 'ajax',
url: '/app/lemenu.php',
reader: {
type: 'json',
root: 'navigation'
}
},
autoLoad: true,
listeners: {
load: function(store,records,success,operation,opts) {
var i=0;
var toolbar = Ext.getCmp('menuToolbar');
// First the top level items
store.each(function(record) {
var menu = Ext.create('Ext.menu.Menu');
Ext.each(record.raw.menu, function(item){
menu.add({
text: item.text,
xtype: item.xtype,
// handler: function(){callFunction(item.handler)}
handler: toolbar[item.handler]
})

})
toolbar.add({
xtype: 'button',
text: record.data.text,
// handler: function(){callFunction(item.handler)}
handler: toolbar[item.handler]
});
i++;
});
}
}
});
}
}
});

Example of json data


{
"navigation": [{
"text": "File",
"handler": "fileMenu" // this is the name of menu handler defined in your toolbar above.
},{
"text": "Save",
"handler": "saveMenu"
...
}]
}

kabkab
15 Oct 2012, 1:07 AM
Hi,
Thank you vietits, It's clear now.