How to create a window form with validation in extjs

Total Post:42

Points:296
Sencha 
 1332  View(s)
Ratings:
Rate this:
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
  1. Post:24

    Points:168
    Re: How to create a window form with validation in extjs

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

      Modified On Apr-11-2018 05:50:25 AM

Answer