interview

home / developersection / interviews / how to create a window form in extjs?

Ask Question
Abhishek Srivasatava

Employee

Follow
Can you answer this question?
Answer

1 Answers

Abhishek Srivasatava

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>

How to create a window form in ExtJS?

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy