JSFiddle - React, Tailwind, and code Playground
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()
});
});