Skip to content

April 20, 2011

1

An enhanced version of Ext.ux.menu.StoreMenu – setSubMenuHandler

by Joe Kuan

I have added a new feature for defining submenus handlers for menu items from StoreMenu. Supposed each item from the StoreMenu need to have it’s own submenus. Then you can define the handler as

StoreMenu.setSubMenuHandler(handler, submenuType)


the handler is the Button handler function – handler(button, event). The submenuType is the type for building the submenu handler.

Following is a sample code for setting a submenu handler.

var menuReport = new Ext.ux.menu.StoreMenu({
   url: '/pages/getReports.php',
   root: 'rows',
   idProperty: 'id',
   fields: [ 'id', 'text', 'iconCls' ]
});

menuReport.setSubMenuHandler(
   function(button, evt) {
      // Extracts the menu item from the button id
      var idArr = button.getId().split(',', 2);
      var id = idArr[0];

      // Launch the editor with report id
      ....
   },
   // Submenu type to match from the server side
   'edit'
);

Then on server side, you need to return the submenu config string. Here is a sample code in PHP

foreach ($entries as $id => $entry) {
    // Build submenu for each report - delete, edit, schedule, view
    $subMenu['items'] = array(
           array('id' => "{$id},delete", 'text' => 'Delete',
                 'smHandler' => 'delete'),
           array('id' => "{$id},edit", 'text' => 'Edit Template',
                 'smHandler' => 'edit'),
           array('id' => "{$id},schedule", 'text' => 'Schedule/Run',
                 'smHandler' => 'schedule'),
           array('id' => "{$id},view", 'text' => 'View/Export',
                 'smHandler' => 'view'),
           array('id' => "{$id},info", 'text' => 'Info',
                 'smHandler' => 'info') );

    // The item menu itself
    $result['rows'][] = array('id' => $id, 'text' => $entry['title'],
                              'iconCls' => getIconCls($entry['iconCls']),
                              'menu' => $subMenu);
}

echo json_encode($result);

The smHandler is required for defining the submenu handler type, so that StoreMenu knows which handler to bind. Note that on the PHP side, you need to have menu and items as the array keys, so the generated JSON string will match the menu config in ExtJS.Button.

Here is a screen shot for the submenus of StoreMenu.

1 Comment Post a comment
  1. Topper
    Dec 2 2011

    Amazing, just what I was looking for! Thx a lot.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: