Remote Menus

Ext.ux.RemoteMenu is a menu that add some new config options to menu items namely

• store
• staticItems
• labelField
• loadingText
• itemIcon/iconField and
• clickHandler

The menu initially renders with the default loading animated gif and the passed loadingText.

When the menu is shown the store loads and the items are added from the store.

When the menu item is clicked the clickHandler is called with one argument, the record from the store corresponding with the clicked item.

Some of this is based on the excellent list filter in the grid filter plugin.

Other config options as follows:

staticItems

Pass an array of static items that are added to the end of the menu after the store is loaded.

labelField

Which store field to use for the menu item text

loadingText

The text to display while loading

store

The store to use to create the menu items

itemIcon

If passed all items from the store get this icon in the menu

iconField

If passed each menu item's icon is sourced from the url in this field in the store

clickHandler

The function to call when the menu item is clicked. This is passed on argument being the Ext.data.Record corresponding with the clicked item

newJobMenu = new Ext.ux.RemoteMenu({
text:'New Job',
icon: '/images/icons/color_wheel_add.png',
itemIcon: '/images/icons/color_wheel_add.png',
cls: 'x-btn-text-icon',
hideOnClick:false,
labelField: 'description',
clickHandler: function(r){
newJob(r.data.id, r.data.description);  
},
store: new Ext.data.JsonStore({
sortInfo :{field:'id', direction:'ASC'},
url : '../action/str-job-type.php',
reader : new Ext.data.JsonReader(),
baseParams: {
filters: true,
where_is_stock: 1
}
}),
staticItems:['-',{
text:'Others...',
icon: '/images/icons/color_wheel_add.png',
cls: 'x-btn-text-icon',
handler: function(){
chooseJobType.show()
}
}]
})

Still to do:

Other styles of menu items, ie checkboxes, date pickers, color pickers