forum

Home / DeveloperSection / Forums / How to create a window form with validation in extjs

How to create a window form with validation in extjs

Elena Glibart 2184 24-Nov-2016

Hi Buddy

I am currently working in sencha extjs application.I have problem during creation a window form.Please help me .

I would really appreciate your help.

Thanks

sencha

Updated on 24-Nov-2016

Elena Glibart

Follow

Can you answer this question?

1 Answers

Abhishek Srivasatava

24-Nov-2016

Hi Elena,

For windows form, you need a button after which window form will be pop.

Example :

 xtype: 'button',
                            text: 'Register',
                            listeners: {
                                click: function() {
                                  
                                   Registwin.show();
                                }
                             }

Here is the code to create windows application in Sencha ExtJS. Please review it and let us know if any updates are required.

 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 !')
                                                }
                                               }
                                           }
                                        
                                         }
                                      ]}}