Tutorial:Ext_Menu_Widget - ? when to use a variable or an id

[mjlecomte]

I have a question from the Tutorial:Ext_Menu_Widget (http://extjs.com/learn/Tutorial:Ext_Menu_Widget)

Is working with a color menu versus a date menu different? In the code below, a variable is used one time to reference the 'object' (I'm not sure if I'm being technically correct using 'object'?), while the other time uses the id. Could you have used an id or variable reference for either one (personal preference), or does one menu type require an id and the other require a variable (ext requirement)?

The more complete code follows below, but the portion I'm asking about is here:


text: 'DateMenu as submenu',
menu: dateMenu //variable reference
}, {
text: 'Submenu with ColorItem',
menu: 'colorMenu'//assign by using id

I'm wondering if you might have multiple instances of a calendar so would want to use either different id's or different variable name references. Maybe something like 'date from' and 'date to'. So you'd probably need to be able to distinguish between the two calendars somehow.


More complete version:


Ext.onReady(function() {
//assign a new Date Menu class to the variable 'dateMenu'
var dateMenu = new Ext.menu.DateMenu({
handler: function(datepicker, date){
alert('Date Selected! you chose: ' + date.format('M j, Y'));
}
});

//assign a new Menu class to the variable 'colorMenu'
//use an object literal '{...}' to specify all of the
//properties we want the menu to have
var colorMenu = new Ext.menu.Menu({
id: 'colorMenu',
//The first property we assign is the menu's id ('colorMenu'). We can
//use this id later to get a reference to this menu.
//This menu's id is used later to assign as a submenu (see Ref 1)
items: [
new Ext.menu.ColorItem({
selectHandler: function(colorpicker, color){
alert('Color Selected! you chose: ' + color);
}
})
]
});

var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: {
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
}, {
text: 'Another item',
handler: clickHandler
},
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
}),
'-', {
text: 'DateMenu as submenu',
menu: dateMenu // Assign the dateMenu we
//created above by using the previously assigned
//variable reference
}, {
text: 'Submenu with ColorItem',
menu: 'colorMenu'
//assign the submenu containing a ColorItem
//by using it's id
}
]
}
}
]);
});

[fay]

I think that example was really just to demonstrate that you could use either - whatever your preference is, or the coding requirement, e.g., you might need to reuse dateMenu.

If you look at the documentation (http://extjs.com/deploy/ext/docs/output/Ext.menu.Menu.html#add) and code (http://extjs.com/deploy/ext/docs/output/Menu.jss.html) for Ext.Menu.add() you'll see that it will determine if you've passed an object or not.