ExtJs学习（二）（表单）

标签：des   style   http   java   color   使用   

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学习（二）（表单）,布布扣,bubuko.com

ExtJs学习（二）（表单）

标签：des   style   http   java   color   使用   

原文地址：http://www.cnblogs.com/tustjj/p/3851259.html