Home > DeveloperSection > Forums > How to create a menu bar in sencha extjs.
Elena Glibart
Elena Glibart

Total Post:35

Points:128
Posted on    November-24-2016 3:52 AM

 sencha extjs Sencha 
Ratings:


 1 Reply(s)
 210  View(s)
Rate this:
Hi Guys

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

Thanks


Abhishek Srivasatava
Abhishek Srivasatava

Total Post:24

Points:168
Posted on    November-24-2016 4:14 AM

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: [ ]
               })
         
           });
 


Modified On Nov-24-2016 04:19:12 AM

Don't want to miss updates? Please click the below button!

Follow MindStick