Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

How to create a window form in ExtJS?

Abhishek Srivasatava 4540 14 Nov 2016

Abhishek Srivasatava

Employee

1 Answers

Abhishek Srivasatava 14 Nov 2016

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>

MindStick Training