Modul ExtJs

Extjs javascript framework that is powerful, its elegant UI, simpleThis time I will explain some of the excess Extjs owned.
1. Form validation email check
To create an email form on the extjs validation, we can script like here

"vtype:'email'"

contoh: {
xtype:'textfield',//tipenya text
fieldLabel: 'Email',// Nama Labelnya
name: 'email',//nama field sesuai dengan di databse
vtype:'email', // validasi email
anchor:'95%' // lebarnya
}

so, if the writing format of the email wrong, so will display alert as follows

Klik Untuk Melihat Gambar

2. Check form can not be empty
to check which can not be empty, we live in extjs using script like this

"allowBlank:false"

example:
{
fieldLabel: 'First Name', //nama label
name: 'first', // nama sesuai dengan nama field di databse
allowBlank:false //g boleh kosong
}
so if the form is empty, then there will be alert as shown below:

Klik Untuk Melihat Gambar

3. Check form time

Like the example above prayer to create a form of time, we live called the following command:

"new Ext.form.TimeField"

example:
new Ext.form.TimeField({
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}


if one of those filling out the form, it will appear like the following alert

Klik Untuk Melihat Gambar

4. Create html editor

script that is used to display the html editor is as follows:

"xtype:'htmleditor',"

example

{ xtype:'htmleditor', id:'bio', fieldLabel:'Biography', height:200, anchor:'98%' }

Klik Untuk Melihat Gambar

5. create tab panel

xtype:'tabpanel',

example

items: { xtype:'tabpanel', activeTab: 0, defaults:{autoHeight:true, bodyStyle:'padding:10px'}, items:[{title:'Personal Details', layout:'form', defaults: {width: 230}, defaultType: 'textfield', items: [{ fieldLabel: 'First Name', name: 'first', allowBlank:false, value: 'Jack' },{ fieldLabel: 'Last Name', name: 'last', value: 'Slocum' },{ fieldLabel: 'Company', name: 'company', value: 'Ext JS' }, { fieldLabel: 'Email', name: 'email',vtype:'email' }] },{ title:'Phone Numbers', layout:'form', defaults: {width: 230}, defaultType: 'textfield',items: [{ fieldLabel: 'Home', name: 'home', value: '(888) 555-1212' },{ fieldLabel: 'Business', name: 'business' },{ fieldLabel: 'Mobile', name: 'mobile' },{ fieldLabel: 'Fax', name: 'fax' }] }] },

Klik Untuk Melihat Gambar