form表单是经常要用到的。这里只是介绍一下布局,数据的读取与交换以后会做介绍。
/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function() {
Ext.QuickTips.init();
var form = new Ext.form.FormPanel({
renderTo: 'docbody',
title : 'Composite Fields',
autoHeight: true,
width : 600,
bodyStyle: 'padding: 5px',
defaults: {
anchor: '0'
},
items : [
{
xtype : 'textfield',
name : 'email',
fieldLabel: 'Email Address',
anchor : '-20'
},
{
xtype: 'compositefield',
fieldLabel: 'Date Range',
msgTarget : 'side',
anchor : '-20',
defaults: {
flex: 1
},
items: [
{
xtype : 'datefield',
name : 'startDate',
fieldLabel: 'Start'
},
{
xtype : 'datefield',
name : 'endDate',
fieldLabel: 'End'
}
]
},
{
xtype: 'fieldset',
title: 'Details',
collapsible: true,
items: [
{
xtype: 'compositefield',
fieldLabel: 'Phone',
// anchor : '-20',
// anchor : null,
msgTarget: 'under',
items: [
{xtype: 'displayfield', value: '('},
{xtype: 'textfield', name: 'phone-1', width: 29, allowBlank: false},
{xtype: 'displayfield', value: ')'},
{xtype: 'textfield', name: 'phone-2', width: 29, allowBlank: false, margins: '0 5 0 0'},
{xtype: 'textfield', name: 'phone-3', width: 48, allowBlank: false}
]
},
{
xtype: 'compositefield',
fieldLabel: 'Time worked',
combineErrors: false,
items: [
{
name : 'hours',
xtype: 'numberfield',
width: 48,
allowBlank: false
},
{
xtype: 'displayfield',
value: 'hours'
},
{
name : 'minutes',
xtype: 'numberfield',
width: 48,
allowBlank: false
},
{
xtype: 'displayfield',
value: 'mins'
}
]
},
{
xtype : 'compositefield',
anchor: '-20',
msgTarget: 'side',
fieldLabel: 'Full Name',
items : [
{
//the width of this field in the HBox layout is set directly
//the other 2 items are given flex: 1, so will share the rest of the space
width: 50,
xtype: 'combo',
mode: 'local',
value: 'mrs',
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: 'Title',
name: 'title',
hiddenName: 'title',
displayField: 'name',
valueField: 'value',
store: new Ext.data.JsonStore({
fields : ['name', 'value'],
data : [
{name : 'Mr', value: 'mr'},
{name : 'Mrs', value: 'mrs'},
{name : 'Miss', value: 'miss'}
]
})
},
{
xtype: 'textfield',
flex : 1,
name : 'firstName',
fieldLabel: 'First',
allowBlank: false
},
{
xtype: 'textfield',
flex : 1,
name : 'lastName',
fieldLabel: 'Last',
allowBlank: false
}
]
}
]
}
],
buttons: [
{
text : 'Load test data',
handler: function() {
var Record = Ext.data.Record.create([
{name: 'email', type: 'string'},
{name: 'title', type: 'string'},
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'phone-1', type: 'string'},
{name: 'phone-2', type: 'string'},
{name: 'phone-3', type: 'string'},
{name: 'hours', type: 'number'},
{name: 'minutes', type: 'number'},
{name: 'startDate', type: 'date'},
{name: 'endDate', type: 'date'}
]);
form.form.loadRecord(new Record({
'email' : 'ed@extjs.com',
'title' : 'mr',
'firstName': 'Abraham',
'lastName' : 'Elias',
'startDate': '01/10/2003',
'endDate' : '12/11/2009',
'phone-1' : '555',
'phone-2' : '123',
'phone-3' : '4567',
'hours' : 7,
'minutes' : 15
}));
}
},
{
text : 'Save',
handler: function() {
if (form.form.isValid()) {
var s = '';
Ext.iterate(form.form.getValues(), function(key, value) {
s += String.format("{0} = {1}<br />", key, value);
}, this);
Ext.example.msg('Form Values', s);
}
}
},
{
text : 'Reset',
handler: function() {
form.form.reset();
}
}
]
});
});
上述代码是Ext官方的example。文件名为composite-field.js。这个例子足可以满足大部分的需要。我曾经google过很多人的代码,但是都没有这个完整。这个效果如下:
打上了水印。哎,不是很喜欢这个东西。如图所示,如何在同一个水平线上添加多个组件,如Full Name所示。这个问题曾经困扰我,对Ext了解实在有限。但是看到这个例子,就恍然大悟了。
class Ext.form.CompositeField,复合表单项,允许将多个表单项渲染到同一行中。在内部使用hbox布局渲染表单项, 所以所有普通的HBox布局配置选项都可用。如下代码所示:
{
xtype: 'compositefield',
labelWidth: 120
items: [
{
xtype : 'textfield',
fieldLabel: 'Title',
width : 20
},
{
xtype : 'textfield',
fieldLabel: 'First',
flex : 1
},
{
xtype : 'textfield',
fieldLabel: 'Last',
flex : 1
}
]
}
但是上述代码有一个令人疑惑的地方。就是各个组件的fieldlabel,Title,First,Last。他们不是分别在三个输入框前,而是会挤在一起,形成一个fieldlabel,中间默认以“,”隔开。其效果如同给compositefield自己设置一个fieldlable一样。如图所示:
以上的form表单还用到另外一个组件——fieldset。标准容器,用来对form 中的项目进行分组,是非常有用的一个组件。
此外,有一个配置项需要注意——anchor。这个属性将会在anchor layout中详细的介绍。大体意思上就是说这个组件相对于父容器的大小。