Ext.onReady(function{
var jj_form = new Ext.FormPanel({
url : ‘jj_form_submit.java‘,
renderTo : document.body,
frame : true,
title : ‘formtest_jj‘,
width : 250,
items : [{
xtype : ‘textfield‘,
fieldlabel : ‘username‘,
name : ‘username‘
},{
xtype : ‘textfield‘,
fieldlabel : ‘password‘,
name " ‘password‘
},{
xtype : ‘datafield‘,
fieldlabel : ‘data‘,
name : data
}
]
});
});
这个实际上就是一个表单对象，其中xtype表示的是表单控件的类型，类型有：textfield,timefield,datafield,numberfield,combo,textarea.
表单校验功能：
allowBlank : false ;不允许空。
disabledDays : [1,2,3,4,5] 不允许选择星期一，二，三，四，五。一定要记得0代表Sunday
其实vtype这种内置校验也是可以进行检验的，比如：vtype : ‘alpha‘ 则表示输入只能匹配文字字符，还有许多其他的约束条件，可以通过论坛中查找获取到。
显示错误的方式：
Ext.onReady(function(){
Ext.QuickTips.init() //通常是放在第一行，通过一个气球来提示错误信息
});
自定义检验，设定自己的vtype：
Ext.form.VTypes[‘nameVal‘] = /^[A-Z][A-Za-z\-] + [A-Z][A-Za-z\-] + $/;
Ext.form.VTypes[‘nameMask‘] = /[A-Za-z\-]/;
Ext.form.VTypes[‘nameText‘] = ‘Invalid name!‘;
Ext.form..VTypes[‘name‘] = function(v){
return Ext.form.VTypes[‘nameVal‘].test(v);
}
单选按钮（radio button）,复选框（check boxes）和组合框(ComboBox)
radio button : {
xtype : ‘radio‘,
fieldlabel : ‘Color‘.
name : ‘color‘,
boxlabel : ‘White‘
}.{
xtype : ‘radio‘,
name : ‘color‘,
hideLabel : false,
boxlabel : ‘Black‘
labelSpearator : ‘‘
}
check box : {
xtype : ‘checkbox‘,
fieldlabel : ‘Are you sure‘,
name : ‘Are you sure‘
}
comboBox :
首先要定义一个数据集合，其中data可以有很多种的形式，这里我们选择的是SimpleStore。
var data_store = new Ext.data.SimpleStore(){
fields : [‘id‘, ‘username‘],
name : [[1, aichengqi], [2, chenli],[3, yuguoxin]]
})
{
xtype : ‘combo‘,
fieldlabel : ‘user‘,
name : ‘user‘,
mode : ‘local‘,
store : ‘username‘,
displayfield : ‘username‘,
width : 120
}
数据库驱动的ComboBox
这里是用PHP语言编写的如何获取JSON数据的方式；（由于涉及到了PHP的函数问题，就没有过多研究了）
之后我们使用JSON Reader来实现远程数据的功能；
var remote_data = new Ext.data.Store({
reader : new Ext.data.JsonReader({
fields : [id, username],
root : ‘rows‘
}),
proxy : new Ext.data.HttpProxy({
url : data/username.php
}),
autoLoad : true
});
remote_data.load();
文本域(TextArea)和html编辑器(html Editor)
TextArea :
{
xtype : ‘textarea‘,
fieldlabel : ‘comment‘,
name : ‘commment‘,
labelSeparator : ‘‘,
hideLabel : true,
height : 100,
anchor : ‘100%‘
}
html Dditor 和上面的一样 :
{
xtype : ‘htmleditor‘,
fieldlabel : ‘editor‘,
name : ‘editor‘,
hideLabel : true,
labelSeparator,
height : 100,
anchor : ‘100%‘
}
ExtJs学习（二）（表单）