Ext.create('Ext.form.Panel', { renderTo: Ext.getBody(), title: 'User Form', height: 130, width: 280, bodyPadding: 10, defaultType: 'textfield', items: [ { fieldLabel: 'First Name', name: 'firstName' }, { fieldLabel: 'Last Name', name: 'lastName' }, { xtype: 'datefield', fieldLabel: 'Date of Birth', name: 'birthDate' } ] });
上面是一个普通的Form表单。
FormItem:
(1):Combobox:--下拉列表
上面的代码是在Form里添加了一个combobox,他的下拉数据来源是一个store,并且为他监听了select事件。
//这里是数据 var states = Ext.create('Ext.data.Store', { fields: ['abbr', 'name'], data : [ {"abbr":"AL", "name":"Alabama"}, {"abbr":"AK", "name":"Alaska"}, {"abbr":"AZ", "name":"Arizona"} //... ] });(2) :Date--日期
Ext.create('Ext.form.Panel', { renderTo: Ext.getBody(), width: 300, bodyPadding: 10, title: 'Dates', items: [{ xtype: 'datefield', anchor: '100%', fieldLabel: 'From', name: 'from_date', maxValue: new Date() // 最大时间 }, { xtype: 'datefield', anchor: '100%', fieldLabel: 'To', name: 'to_date', value: new Date() // 默认时间 },{ xtype:'datefield', anchor:'100%', fieldLabel:'Date', name:'date',//格式化时间,默认值是new Date() format:'m/d/Y', value:new Date()}] });
(3):DIsplay---单纯显示文本控件
{ xtype: 'displayfield', fieldLabel: 'Visitor', name: 'visitor_score', value: '11' }],这是一个不可编辑的文本
(4):Hidden--隐藏控件
{ xtype: 'hiddenfield', name: 'hidden_field_1', value: 'value from hidden field' }],(5):NumberField--数字控件
{
xtype: 'numberfield',
anchor: '100%',
name: 'age',
fieldLabel: 'Age',
minValue: 0, //最小值
hideTrigger: true,//隐藏上下导航的箭头
keyNavEnabled: false,//禁止通过键盘上下键修改数字
mouseWheelEnabled: false//禁止通过鼠标滚轮改变数字
}
//由此可见,我们可以通过导航箭头,键盘上下键 和鼠标滚轮来改变数字。
(6)radio xtype---'radiofield'