---
title: "How to create a menu bar in sencha extjs."  
description: "How to create a menu bar in sencha extjs."  
author: "Elena Glibart"  
published: 2016-11-24  
updated: 2016-11-24  
canonical: https://www.mindstick.com/forum/34209/how-to-create-a-menu-bar-in-sencha-extjs  
category: "sencha extjs"  
tags: ["sencha"]  
reading_time: 2 minutes  

---

# How to create a menu bar in sencha extjs.

Hi Guys\
Can you tell me how to create menu bar in extjs.\
Thanks

## Replies

### Reply by Abhishek Srivasatava

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

```

```


---

Original Source: https://www.mindstick.com/forum/34209/how-to-create-a-menu-bar-in-sencha-extjs

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.