HOW TO CREATE A MENU BAR IN SENCHA EXTJS.

Elena Glibart

Total Post:42

Points:296
Posted by  Elena Glibart
Sencha 
 789  View(s)
Ratings:
Rate this:
Hi Guys

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

Thanks
  1. Abhishek Srivasatava

    Post:24

    Points:168
    Re: How to create a menu bar in sencha extjs.

    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

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!