Remote Menus for Ext JS

Wed 10th Nov 2010 -- Lee Rowlands

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:


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


Which store field to use for the menu item text


The text to display while loading


The store to use to create the menu items


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


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


The function to call when the menu item is clicked. This is passed on argument being the 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',
  labelField: 'description',
  clickHandler: function(r){
  store: new{
    sortInfo :{field:'id', direction:'ASC'},
    url : '../action/str-job-type.php',
    reader : new,
    baseParams: {
      filters: true,
      where_is_stock: 1
    icon: '/images/icons/color_wheel_add.png',
    cls: 'x-btn-text-icon',
    handler: function(){

Still to do:

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