Extjs表单布局(1)

Posted by Epoch Blog on December 4, 2021

布局方案:ieldset+table布局

代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var buttons = [{ text: '提交', scope: this, handler: this.onFormSubmit }, { text: '关闭', scope: this, handler: this.onFormCancel }];
var formData = {
	xtype: 'fieldset',
	title: '用户信息',
	layout: {
		type: "table",
		columns: 2,
		tableAttrs: {style: {width: "100%"}},
		tdAttrs: {valign: "middle"}
	},
	defaults: { xtype: "textfield",width: "100%",autoComplete:"off"},
	items: [
		{ fieldLabel: '<font color="red""></font>账号', name: 'account', allowBlank: false, readOnly: !Ext.isEmpty(me.params.userid) },
		{ fieldLabel: '姓名', name: 'realName'},
		{ fieldLabel: '联系电话', name: 'phone'},
		{ fieldLabel: '邮箱', name: 'email',value:""},
		{ fieldLabel: '<font color="red""></font>密码', name: 'password', value:"",allowBlank: false, inputType: 'password' },
		{ fieldLabel: '<font color="red""></font>密码确认', name: 'password1',value:"", allowBlank: false, inputType: 'password' },
		{
			xtype: 'tagField', colspan: 2,width: "100%",fieldLabel: '角色', hiddenName: 'roleIds', name: 'roleIdsName', url: 'epoch/sys/role/getRoleComList'
		},
		{ fieldLabel: '是否启用', xtype: 'checkbox', checked: true, inputValue: '1', uncheckedValue: "2", name: 'status' }
	]
};
Ext.apply(this, {
	items: [formData],
	buttons: buttons
});