Home > DeveloperSection > Interviews > How to create a window form in ExtJS?

Posted on    November-14-2016 4:08 AM

 sencha extjs JavaScript 
Ratings:
 1 Answer(s)
  56  View(s)
Rate this:

Abhishek Srivasatava
Abhishek Srivasatava

Total Post:70

Points:350
Posted on    November-14-2016 4:08 AM

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>



Don't want to miss updates? Please click the below button!

Follow MindStick