首页 > 代码库 > ExtJs学习(二)(表单)

ExtJs学习(二)(表单)

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 = http://www.mamicode.com/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%‘
}