Extjs-form实例2
<span style="font-size: small;">4。1自带验证功能表单：Ext.form.Field.prototype.msgTarget = 'side';//验证错误时在旁边显示<span style="" />
var bd = Ext.getBody();<span style="" />
bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});<span style="" />
var simple = new Ext.FormPanel({<span style="" />
labelWidth: 75, frame:true, title: 'Simple Form',<span style="" />
bodyStyle:'padding:5px 5px 0', width: 350,<span style="" />
defaults: {width: 230}, defaultType: 'textfield',<span style="" />
items: [{<span style="" />
fieldLabel: 'First Name',<span style="" />
name: 'first',<span style="" />
allowBlank:false<span style="" />
},{<span style="" />
fieldLabel: 'Last Name',<span style="" />
name: 'last'<span style="" />
},{<span style="" />
fieldLabel: 'Company',<span style="" />
name: 'company'<span style="" />
}, {<span style="" />
fieldLabel: 'Email',<span style="" />
name: 'email',<span style="" />
vtype:'email' // email验证<span style="" />
}, new Ext.form.TimeField({<span style="" />
fieldLabel: 'Time',<span style="" />
name: 'time',<span style="" />
minValue: '8:00am',<span style="" />
maxValue: '6:00pm' //验证<span style="" />
})<span style="" />
],<span style="" />
buttons: [{<span style="" />
text: 'Save'<span style="" />
},{<span style="" />
text: 'Cancel'<span style="" />
}]<span style="" />
});<span style="" />
simple.render(document.body);
4。2表单嵌套：xtype:'fieldset', <span style="" />
checkboxToggle:true,//多选表单，默认为单选<span style="" />
title: 'User Information',<span style="" />
autoHeight:true,<span style="" />
defaults: {width: 210},<span style="" />
defaultType: 'textfield',<span style="" />
collapsed: true,<span style="" />
4。3左右排列： xtype:'tabpanel',
activeTab: 0,
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
5。bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});
var top = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: 'Multi Column, Nested Layouts and Anchoring',
bodyStyle:'padding:5px 5px 0',
width: 600,
items: [{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'htmleditor',
id:'bio',
fieldLabel:'Biography',
height:200,
anchor:'98%'
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
top.render(document.body);
6。var search = new Ext.form.ComboBox({<span style="" />
store: ds, //Store对象通过proxy和reader加载数据<span style="" />
displayField:'title',<span style="" />
typeAhead: false,<span style="" />
loadingText: 'Searching...',//现在查询时显示文字及ajax图标<span style="" />
width: 570,<span style="" />
pageSize:10, //每页条数<span style="" />
hideTrigger:true, <span style="" />
tpl: resultTpl, //放置查询结果的<span style="" />
页:
[1]