JSFiddle - React, Tailwind, and code Playground

by vishalzanzrukia

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">

JavaScript

Ext.onReady(function(){
			Ext.create('Ext.form.Panel', {
			    title: 'Hello World With ExtJS',
			    id:'my-form-id',
			    bodyPadding: 5,
			    width: 300,
			    url: 'your_submit_url',
			    //you can set defaults value here for all fields.
			    defaults: {
			        //anchor: '100%',
			        emptyText : 'Please enter valid value.'
			    },
			    //every fields of this form will be text by default.  
			    items: [{
			        fieldLabel: 'Roll No.',
			        name: 'rollNo',
			        xtype:'numberfield',
			        minValue:1,
			        maxValue:100,
			        allowDecimals:false,
			        allowBlank: false
			    },{
			    	xtype : 'textfield',
			        fieldLabel: 'First Name',
			        name: 'firstName',
			        allowBlank: false
			    },{
			    	xtype:'numberfield',
			        fieldLabel: 'Mobile No',
			        name: 'mobile',
			        minLength:10,
			        maxLength:10,
			        regexText : 'This field must be only numeric',
			        allowBlank: false
			    }],
			    buttons: [{
			        text: 'Reset',
			        handler: function() 
			        {
			            this.up('form').getForm().reset();
			        }
			    }, {
			        text: 'Submit',
			        //when you want to submit form only when form is valid then true bellow two configs   
			        formBind: true,
			        disabled: true,
			        handler: function() 
			        {
			        	//you can get any component by id using Ext.getCmp as given below.
			            var form = Ext.getCmp('my-form-id').getForm();
			            if (form.isValid()) 
			            {
			                alert('Your form is valid..You can submit it now from here..!');
			            }
			        }
			    }],
			    //when we want to display/render your component in direct body then use below line. we will learn about it more.
			    renderTo: Ext.getBody()
			});
		});