---
title: "Basic Code to use Sencha ExtJs."  
description: "This article is useful to learn how to create a web application using sencha ExtJS and some basic concept how to create a panel,  Windows form,  putti"  
author: "Abhishek Srivasatava"  
published: 2016-11-23  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/12207/basic-code-to-use-sencha-extjs  
category: "sencha extjs"  
tags: ["web development", "html", "sencha"]  
reading_time: 9 minutes  

---

# Basic Code to use Sencha ExtJs.

Sencha ExtJS is an advanced version of JavaScript. Now the days, it is one of the most valuable language in terms of a [web application](https://www.mindstick.com/articles/13069/progressive-web-application-pwas-all-you-need-to-know-about) as it is helpful in designing because of its vast predefined [properties](https://yourviews.mindstick.com/view/81845/now-it-s-possible-to-predict-properties-of-any-molecule) of panel tab etc.

\
**Here is the code related to Sencha ExtJS. If you want to create panels inside panel, then this code may be helpful:**

![Basic Code to use Sencha ExtJs.](https://www.mindstick.com/mindstickarticle/74693513-ea45-4f77-83f3-b49a1f8eb462/images/679c6db1-9541-4d19-9894-cbec2b0dce3f.png)**\**

**\
Here is the code for above output:** \
\

```
    <!DOCTYPE html>    <html>    <head>       <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>       <script type="text/javascript">           Ext.onReady(function () {               Ext.create('Ext.panel.Panel', { // Creating Panel                   renderTo: 'div2',                    height: 585,                               width: 1360 ,                   layout: 'border',                       items: [{               // Creating Panel inside Panel                              title: 'West Panel',                       region: 'west',                       html: 'West Side of the Panel',                       collapsible: true,                       split: true,                       width: 300,                       layout : 'accordion',                       bodyStyle: 'padding:15px',                       items: [{             // Creating Panel inside Panel                            title: 'Panel 1',                           html: 'Panel 1 html content'                       }, {                           title: 'Panel 2',                           html: 'Panel 2 html content'                       }, {                           title: 'Panel 3',                           html: 'Panel 3 html content'                       }]                                         }, {                       title: 'south Panel',                       region: 'south',                       html: 'South Side of the Panel',                       collapsible: true,                       split: true,                       bodyStyle: 'padding:15px'                    }, {                       title: 'East Panel',                       region: 'east',                       html: 'East Side of the Panel',                       collapsible: true,                       split: true,                       bodyStyle: 'padding:15px'                    }]               });           }); 
```

\
\

If we want to create a menu bar then this code may be helpful:\
\
![Basic Code to use Sencha ExtJs.](https://www.mindstick.com/mindstickarticle/74693513-ea45-4f77-83f3-b49a1f8eb462/images/2e90df8b-849e-4857-bb67-f9e13b186edc.png)\
**\
Here is code for the above output:**

**\**

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

\

**If we want to create a window [form with validation](https://www.mindstick.com/forum/159302/implement-a-react-form-with-validation-that-submits-data-to-an-api-endpoint-on-form-submission), then this code may be**

## \

**helpful:**\

![Basic Code to use Sencha ExtJs.](https://www.mindstick.com/mindstickarticle/74693513-ea45-4f77-83f3-b49a1f8eb462/images/67aa2b50-0bc8-4424-b921-9b922499fba0.png)\

\

Here is the code for above output:\

\

```
               Ext.onReady(function () {                   Registwin = new Ext.Window({ // Creating login window                        xtype: 'UserForm',                       modal: true,                       closeAction: 'close',                       layout: 'fit',                       height: 300,                       width: 400,                       title: 'Register',                       items: [                           {                               xtype: 'form',                               bodyPadding: 5,                               items: [                                   {                                       xtype: 'fieldset',                                       title: 'Fill The Details',                                        defaults: {                                           xtype: 'textfield',                                           labelWidth: 100,                                           maxLength: 10,                                           enforceMaxLength: true,                                           width: 300                                        },                                       items: [                                            {                                               labelSeparator: '',              // It is used to add fieldLabel and textbox                                               fieldLabel: 'Name',                                               name: 'Name',                                                                  maxLength: 10,                // It will show error after 10 digit                                               enforceMaxLength: true,   // Used so that user cannot enter the value whose text length is greater than 10.                                               allowBlank: false,            // Putting validation so that this fieldwill be manadatory.                                               msgTarget: 'under'         // Place Where we need to error message.                                             },                                           {                                               fieldLabel: 'Email',                                               labelSeparator: '',                                               name: 'UserEmail',                                               maxLength: 20,                                                                vtype :'email',                   // Putting validation so that input will be email type only.                                               enforceMaxLength: true,                                               allowBlank: false,                                               msgTarget: 'under'                                           },                                           {                                               fieldLabel: 'Phone',                                               name: 'PhoneNumber',                                               labelSeparator: '',                                               maskRe: /[0-9]/,              //Textbox will accept only 0-9character                                               maxLength: 10,                                               enforceMaxLength: true,                                               allowBlank: false,                                               msgTarget: 'under'                                            },                                           {                                               labelSeparator: '',                                               fieldLabel: 'Address',                                               name: 'Address',                                               maxLength: 10,                                               enforceMaxLength: true,                                               allowBlank: false,                                               msgTarget: 'under'                                           },                                              {                                               xtype: 'datefield',                                               fieldLabel: 'Date of birth',                                               name: 'DOB',                                               labelSeparator: '',                                               format: 'd/m/Y',              // Putting validation for user input must be date month and year.                                               maxLength: 10,                                               enforceMaxLength: true,                                               allowBlank: false,                                               msgTarget: 'under'                                           },                                           {                                               fieldLabel: 'Password',                                               name: 'Password',                                               id: 'pass1',                                               labelSeparator: '',                                               inputType: 'password', //User input will be hidden,show only *                                               maxLength: 10,                                               enforceMaxLength: true,                                               allowBlank: false,                                               msgTarget: 'Under'                                           }                                        ]                                   }                               ],                               buttons: [                                   {                                       text: 'Save',                                       action: 'saveUser',
//Above validation is used to show error message but we need to put validation on button otherwise after clicking on button wrong data will be processded successfully. We need to show error message after clicking on click button. So below is the code to check all form validation.                                       listeners: {                                           click: function (button) {                                               var form = button.up('form');                                               if (form.isValid()) {                                                   Ext.Msg.alert('Succcess', 'Thanks For Register !')                                               }                                               else                                               {                                                   Ext.Msg.alert('Error', 'Please fill valid data !')                                                }                                               }
                                           }

                                         }
                                      ]
```

**Here is the complete code to use all the above concept in the program.**

**\**\

```
     <!DOCTYPE html>    <html>    <head>       <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />       <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>       <script type="text/javascript">           Ext.onReady(function () {               Ext.create('Ext.panel.Panel', {                   renderTo: 'div2',                   height: 585,                   width: 1360 ,                   layout: 'border',                   defaults: {                   },                                      items: [{                       title: 'West Panel',                       region: 'west',                       html: 'West Side of thePanel',                       collapsible: true,                       split: true,                       width: 300,                       layout : 'accordion',                       bodyStyle: 'padding:15px',                       items: [{                           xtype : 'panel',                           title: 'Panel 1',                           html: 'Panel 1 html content'                       }, {                           title: 'Panel 2',                           html: 'Panel 2 html content'                       }, {                           title: 'Panel 3',                           html: 'Panel 3 html content'                       }]                                         }, {                       title: 'south Panel',                       region: 'south',                       html: 'South Side of the Panel',                       collapsible: true,                       split: true,                       bodyStyle: 'padding:15px'                    }, {                       title: 'East Panel',                       region: 'east',                       html: 'East Side of the Panel',                       collapsible: true,                       split: true,                       bodyStyle: 'padding:15px'                    }]               });           });           Ext.onReady(function () {               var SamplePanel =Ext.extend(Ext.Panel, {                   width: 1365,                   height: 60,                   hidden: false,                   renderTo: 'div1',                   scrollable: true               })                              new SamplePanel({                   title: 'Implementation Testing',                    tbar: [{                       iconCls: 'add16',                       text: 'Test1',                       menu: [                               {                                                                      text: "Register",                                   closable: false,                                   listeners: {                                       click: function () {
                                        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: [                    ]               })                           });            Ext.onReady(function () {               loginwin = new Ext.Window({                  id: 'newForm',                  modal: true,                  closeAction: 'close',                  layout: 'fit',                  height: 200,                  width: 400,                  title: 'UserForm',                  items: [                      {                          xtype: 'form',                          bodyPadding: 5,                          items:                                  [                                   {                                  xtype: 'fieldset',                                  title: 'Login Page',                                  defaults:                                      {                                      xtype: 'textfield',                                      labelWidth: 100,                                      width:300                                      },                                  items:                                      [                                      {                                          fieldLabel: 'Email',                                          name:'Email',                                         labelSeparator: '',                                         maxLength: 10,                                         enforceMaxLength: true,                                         allowBlank: false,                                         msgTarget: 'under'                                      },                                      {                                          fieldLabel:'Password',                                          name:'Password',                                         maxLength: 10,                                         enforceMaxLength: true,                                         labelSeparator: '',                                         allowBlank: false,
                                         inputType :'password',                                         msgTarget: 'under'                                      }                                  ]                              }                          ],                          buttons: [                              {                                  text: 'Save',                                  action: 'saveUser',                                  listeners: {                                      click: function (button) {                                            var form = button.up('form');                                          if (form.isValid()) {Ext.Msg.alert('Succcess', 'Welcome!')}                                          else                                         {   Ext.Msg.alert('Error', 'Please fillvailid data !')}                                                              }                                  }                              }                          ]                       }                  ]               });                 Ext.onReady(function () {                   Registwin = new Ext.Window({                       xtype: 'UserForm',                       modal: true,                       closeAction: 'close',                       layout: 'fit',                       height: 300,                       width: 400,                       title: 'Register',                       items: [                           {                               xtype: 'form',                               bodyPadding: 5,                               items: [                                   {                                       xtype: 'fieldset',                                       title: 'Fill The Details',                                        defaults: {                                          xtype: 'textfield',                                          labelWidth: 100,                                          maxLength: 10,                                          enforceMaxLength: true,                                          width: 300                                        },                                       items: [                                           {                                              name: 'UserId',                                              hidden: true                                           },                                           {                                              labelSeparator: '',                                               fieldLabel: 'Name',                                              name: 'Name',                                              maxLength: 10,                                              enforceMaxLength: true,                                               allowBlank: false,                                              msgTarget: 'under'                                            },                                           {                                              fieldLabel: 'Email',                                              labelSeparator: '',                                              name: 'UserEmail',                                              maxLength: 20,                                              vtype :'email',                                                enforceMaxLength: true,                                              allowBlank: false,                                              msgTarget: 'under'                                           },                                           {                                              fieldLabel: 'Phone',                                              sortable: false,                                              name: 'PhoneNumber',                                              labelSeparator: '',                                              maskRe: /[0-9]/,                                              maxLength: 10,                                               enforceMaxLength: true,                                              maxLength: 10,                                              enforceMaxLength: true,                                              allowBlank: false,                                               msgTarget: 'under'                                            },                                           {                                              labelSeparator: '',                                              fieldLabel: 'Address',                                              name: 'Address',                                              maxLength: 10,                                              enforceMaxLength: true,                                              allowBlank: false,                                              msgTarget: 'under'                                          },                                              {                                              xtype: 'datefield',                                              fieldLabel: 'Date of birth',                                              name: 'DOB',                                              labelSeparator:'',                                              format: 'd/m/Y',
                                              maxLength: 10,                                              enforceMaxLength: true,                                               allowBlank:false,                                              msgTarget: 'under'                                           },                                           {                                               fieldLabel: 'Password',                                              name: 'Password',                                              id: 'pass1',                                              labelSeparator: '',                                               inputType: 'password',                                               maxLength: 10,                                              enforceMaxLength: true,                                               allowBlank:false,                                              msgTarget: 'Under'                                           }                                                                                 ]                                   }                               ],                               buttons: [                                   {                                       text: 'Save',                                       action: 'saveUser',                                      listeners: {                                          click: function (button) {                                               var form = button.up('form');                                               if (form.isValid()) {                                                  Ext.Msg.alert('Succcess','Thanks For Register !')                                              }                                               else                                              {                                                  Ext.Msg.alert('Error','Please fill vailid data !')                                               }                                            }                                       }                                   }                               ]                           }                           ]                   });               });           })        </script>    </head>    <body>        <div id="div1"></div>        <div id="div2"></div>           </body>    </html>
```

\

![Basic Code to use Sencha ExtJs.](https://www.mindstick.com/mindstickarticle/74693513-ea45-4f77-83f3-b49a1f8eb462/images/8ef1228e-392a-422e-bd84-23b91619bc88.png)\

---

Original Source: https://www.mindstick.com/articles/12207/basic-code-to-use-sencha-extjs

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
