HOW TO CREATE A WINDOW FORM IN EXTJS?

Abhishek Srivasatava

Total Post:70

Points:350
Posted by  Abhishek Srivasatava
 427  View(s)
Ratings:
Rate this:
  1. Abhishek Srivasatava

    Post:70

    Points:350
    How to create a window form in ExtJS?

    Let’s suppose you have to create a window form for the employment section. In which name of the employee, Father Name, Mother name, Employee Id, request text is needed.

     

    <!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 () {
               employeeDetails = new Ext.Window({
                   title: 'Employee Details',
                   layout   : 'form',
                   width: 600,
                   closeAction: 'close',
                   target: document.getElementById('buttonId'),
                   plain: true,
                   items: [{
                       xtype: 'textfield',
                       fieldLabel: 'Employee Name'
                   }, {
                       xtype: 'textfield',
                       fieldLabel: 'Father Name'
                   }, {
                       xtype: 'textfield',
                       fieldLabel: 'Mother Name'
                   }, {
                       xtype: 'textfield', //xtype: 'numberfield',
                       maskRe: /[0-9]/,
                      // maxValue: 99,
                      // minValue: 0,
                       maxLength: 3,
                       enforceMaxLength: true,
                       fieldLabel: 'Employee Id'
                   }, {
                       xtype: 'textarea',
                       fieldLabel: 'Request data'
                   }],
                   buttons: [{
                       text: 'Save',
                       handler: function () { Ext.Msg.alert('Saved', 'Your msg is saved'); }
                   }, {
                       text: 'Update',
                       handler: function () { Ext.Msg.alert('Updated', 'Your record has been update'); }
                   }, {
                       text: 'Delete',
                       handler: function () {  Ext.Msg.alert('Deleted', 'Your record has been deleted'); }
                   }],
                   buttonAlign: 'center',
               });
               Ext.create('Ext.Button', {
                   renderTo: Ext.getElementById('buttonId'),
                   text: 'Click Me',
     
                   listeners:
                       {
                           mouseover:function () {
                               toolTip.show();;
                           },
     
                       click: function () {
                       employeeDetails.show();
                       }
                   }
               });
     
               toolTip = new Ext.ToolTip({
                   id: 'toolTip',
                   anchor: 'bottom',
                   html: 'Do not forget to take your redeem',
                   title: 'Tool Title',
                   closable: true,
                   closeAction: 'hide'
               });
           });
       </script>
    </head>
    <body>
       <p> Click here to make personnel change </p>
       <div id = "buttonId"></div>
    </body>
    </html>


Answer

NEWSLETTER

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