forum

Home / DeveloperSection / Forums / How to create a menu bar in sencha extjs.

How to create a menu bar in sencha extjs.

Elena Glibart 2208 24-Nov-2016

Hi Guys

Can you tell me how to create menu bar in extjs.

Thanks

sencha

Updated on 24-Nov-2016

Elena Glibart

Follow

Can you answer this question?

1 Answers

Abhishek Srivasatava

24-Nov-2016

Hi Elena,

I have created the demo menu bar , Please review it let us know if any information is required related to the sencha ExtJS.

  Ext.onReady(function () {
               var SamplePanel = Ext.extend(Ext.Panel, { // Creating Panel to for Menu bar 
                   width: 1365,
                   height: 60,
                   hidden: false,
                   renderTo: 'div1',
                  scrollable: true
               })
 
              
               new SamplePanel({                              // Defining Panel to for Menu bar 
                  title: 'Implementation Testing',
 
                  tbar: [{                                          //Creating top view for the menu bar 
                      iconCls: 'add16',                         // Assigning view property to the test1 
                      text: ‘test1’,
                      menu: [                                    // Creating items under 1 menu bar.
                               {
                                   
                                   text: 'Register',
                                   closable: false,
                                   listeners: {
                                       click: function () {  // Action which we need to proceed after clicking on menu item
                      Registwin.show();
                                       }
                                   }
                               },
                                   {
                                     
                                       text:'login',
                                      closable: false,
                                      listeners: {
                                           click: function () {
                                              loginwin.show();
                                           }
                                       }
                                   }
                               ]},
                   {
                       iconCls: 'add16',
                       text: ‘test2’,
                       menu: [
                              {
                                 
                                  text: 'Register',
                                  closable:false,
                                  listeners: {
                                      click:function () {
                                         Registwin.show();
                   
                  }
                                  }
                              },
                                  {
                                     
                                      text:'login',
                                      closable:false,
                                     listeners: {
                                         click: function () {
                                             loginwin.show();
                                          }
                   
                  }
                                  }
                       ]
 
                   },
                     {
                         iconCls: 'add16',
                         text: ‘test3’,
                         menu: [
                              {
                                 
                                  text: 'Register',
                                  closable: false,
                                  listeners: {
                                      click:function () {
                                         Registwin.show();
                                      }
                                  }
                              },
                                  {
                                     
                                      text:'login',
                                      closable: false,
                                     listeners: {
                                         click: function () {
                                              loginwin.show();
                                          }
                                      }
                                  }
                         ]
                     },
                      {
                          iconCls: 'add16',
                          text: ‘test4’,
                          menu: [
                              {
                                
                                  text: 'Register',
                                  closable: false,
                                  listeners: {
                                      click:function () {
                                         Registwin.show();
                                      }
                                  }
                              },
                                  {
                                     
                                      text: 'login',
                                      closable: false,
                    
                 listeners: {
                                         click: function () {
                                             loginwin.show();
                                          }
                                      }
                                  }
                          ]
                      },
                       {
                            iconCls: 'add16',
                            text: ‘test5’,
                            menu: [
                              {
                                 
                                  text: 'Register',
                                  closable: false,
                                  listeners: {
                                      click: function () {
                                         Registwin.show();
                                      }
                                  }
                              },
                                  {
                                   
                                      text: 'login',
                                      closable: false,
                                     listeners: {
                                          click: function () {
                                              loginwin.show();
                                          }
                                      }
                                  }
                            ]
                       },
                       {
                   
            iconCls: 'add16',
                                text: ‘test6’,
                                menu: [
                                  {
                                    
                                      text: 'Register',
                                      closable: true,
                                      listeners: {
                                         click: function () {
                                             Registwin.show();
                       
                  }
                                      }
                                  },
                                      {
                                          
                                          text: 'login',
                                          closable: false,
                                         listeners: {
                                             click: function () {
                                                 loginwin.show();
                          
                   }
                                          }
                                      }
                                ]
                       }, 
                       {
                            xtype: 'button',
                            text: 'Register',
                            listeners: {
                                click: function() {
                                  
                                   Registwin.show();
                                }
                             }
                            
                       }, {
                            xtype: 'button',
                            text: 'Login',
                            listeners: {
                               
                                click: function() {
                                   
                                   loginwin.show();
                                }
                            }
                       }
                  ],
                   lbar: [
                  ],
                  rbar: [],
                  bbar: [ ]
               })
          
           });