Ext JS 4 - Form Panel With Menubar

The form panel (Ext.form.Panel) class in Ext JS is used for creating form. The default layout of the form panel is anchor. It has lot options for customization, in that one of the feature is menu bar. The following properties are used for including menu into form panel. 

  1. tbar - Top Bar
  2. bbar - Bottom Bar
  3. lbar - Left Bar
  4. rbar - Right Bar

Let's see an example for creating form panel with menu bar.

Ext.define('MyApp.view.PanelWithMenuBar', {
 extend : 'Ext.form.Panel',
 alias : 'widget.panelwithtoolbar',
 layout : 'anchor',
 height : 400,
 width : 400,
 title : 'Form Panel with Menubar',
 url : '/saveform',
 tbar : [{
  text : 'Top-Left Menu',
  menu : [{
   text : 'User',
   menuKey : 'top-left-create-user'
  }, {
   text : 'Document',
   menuKey : 'top-left-create-document'
  }, {
   text : 'Profile',
   menuKey : 'top-left-create-profile'
  }]
 }, '->', {
  text : 'Top-Right Menu',
  menu : [{
   text : 'User',
   menuKey : 'top-right-create-user'
  }, {
   text : 'Document',
   menuKey : 'top-right-create-document'
  }, {
   text : 'Profile',
   menuKey : 'top-right-create-profile'
  }]
 }],
 bbar : [{
  text : 'Bottom-Left Menu',
  menu : [{
   text : 'User',
   menuKey : 'bottom-left-create-user'
  }, {
   text : 'Document',
   menuKey : 'bottom-left-create-document'
  }, {
   text : 'Profile',
   menuKey : 'bottom-left-create-profile'
  }]
 }, '->', {
  text : 'Bottom-Right Menu',
  menu : [{
   text : 'User',
   menuKey : 'bottom-right-create-user'
  }, {
   text : 'Document',
   menuKey : 'bottom-right-create-document'
  }, {
   text : 'Profile',
   menuKey : 'bottom-right-create-profile'
  }]
 }],
 items : [{
  xtype : 'textfield',
  fieldLabel : 'First Name',
  name : 'firstName',
  allowBlank : false
 }, {
  xtype : 'textfield',
  fieldLabel : 'Last Name',
  name : 'lastName',
  allowBlank : false
 }],
 renderTo : Ext.getBody()
}); 

Here the symbol ''  is used for moving our menu from left to right side.

Here I have included menuKey attribute, this is custom attribute included for taking handle of the menu actions in controller side. Let's see, how to take a control of form panel and corresponding form menu actions in controller. This is very tricky part when you are in beginning stage and this is my controller code for above view.

Ext.define('MyApp.controller.PanelWithMenuBar', {
 extend : 'Ext.app.Controller',
 init : function() {
  this.control({
   'menuitem[menuKey]' : {
    click : function(menuItem, e, eOpts) {
     switch(menuItem.menuKey) {
      case 'top-left-create-user' :
       console.log('Event related to top-left-create-user');
       break;
      case 'top-left-create-document' :
       console.log('Event related to top-left-create-document');
       break;
      case 'top-left-create-profile' :
       console.log('Event related to top-left-create-profile');
       break;
      case 'bottom-right-create-user' :
       console.log('Event related to bottom-right-create-user');
       break;
      case 'bottom-right-create-document' :
       console.log('Event related to bottom-right-create-document');
       break;
      case 'bottom-right-create-profile' :
       console.log('Event related to bottom-right-create-profile');
       break;
      //Other menukey actions will goes here.....
     }
    }
   }
  });
  this.callParent(arguments);
 }
});


During rendering of an application, the Ext JS will create an object of 'Ext.menu.Item' for tbar, lbar, bbar, and rbar based on its configuration. So I can take a control of all menu items by using xtype and menuKey.

menuitem[menuKey] - Here menuitem refer the xtype of 'Ext.menu.Item' and menuKey is our custom attribute.

The result of above example is given below.




Comments