forum

home / developersection / forums / how to create a menu bar in sencha extjs.

Ask Question

How to create a menu bar in sencha extjs.

Elena Glibart 2602 24-Nov-2016
Hi Guys

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

Thanks
sencha extjs sencha 
Updated on 24-Nov-2016
Elena Glibart

Elena Glibart

Follow

Can you answer this question?
Answer

1 Answers

Abhishek Srivasatava

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: [ ]
               })
          
           });
 
How to create a menu bar in sencha extjs.

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy