ExtJs 经典布局(一)

ExtJs 经典布局(一)_第1张图片

 

function getInsertForm() {
	if (!insertForm) {
		insertForm = new Ext.FormPanel({
			labelWidth : 100,
			monitorValid : true,// 把有formBind:true的按钮和验证绑定
			baseCls : 'x-plain',
			autoHeight : true,
			frame : true,
			defaults : {
				width : 200
			},
			defaultType : 'textfield',// 默认字段类型

			// 定义表单元素
			items : [{
						fieldLabel : '标题',
						name : 'title',
						allowBlank : false
					}, {
						fieldLabel : '租金',
						name : 'hireprice'
					}, {
						fieldLabel : '联系人',
						name : 'linkman'
					}, {
						fieldLabel : '联系电话',
						name : 'linktel'
					}, {
						fieldLabel : '几室',
						xtype : "combo",
						hiddenName : "room",// 大家要注意的是hiddenName和name属性,name只是下拉列表的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到真正的值的。
						store : new Ext.data.SimpleStore({
									fields : ['a', 'b'],
									data : [['1', '一'], ['2', '二'], ['3', '三']]
								}),
						valueField : 'a',
						displayField : 'b',
						mode : 'local',
						triggerAction : 'all',
						forceSelection : true,
						selectOnFocus : true,
						editable : false,
						readOnly : true,
						emptyText : "无限制!"
					}, {
						fieldLabel : '几厅',
						xtype : "combo",
						hiddenName : "ting",// 大家要注意的是hiddenName和name属性,name只是下拉列表的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到真正的值的。
						store : new Ext.data.SimpleStore({
									fields : ['a', 'b'],
									data : [['1', '一'], ['2', '二'], ['3', '三']]
								}),
						valueField : 'a',
						displayField : 'b',
						mode : 'local',
						triggerAction : 'all',
						forceSelection : true,
						selectOnFocus : true,
						editable : false,
						readOnly : true,
						emptyText : "无限制!"
					}, {
						fieldLabel : "区域",
						xtype : 'combo',
						store : new Ext.data.SimpleStore({
									fields : ['id', 'name'],
									data : Ext.grid.areaComboBoxItems
								}),
						valueField : "id",
						displayField : "name",
						mode : 'local',
						forceSelection : true,// 必须选择一项
						emptyText : '请选择区域...',// 默认值
						name : "area",
						hiddenName : "areaId",// hiddenName才是提交到后台的input的name
						editable : false,// 不允许输入
						triggerAction : 'all',// 因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。
						listeners : {
							select : function(combo, record, index) {
								houseService.findStreetsByAreaId(combo.value,
										function(data) {
											if (data != null) {
												var list2 = [];
												for (var i = 0; i < data.length; i++) {
													list2[i] = [data[i].id,
															data[i].sname];
												}
												Ext.getCmp('child_id1')
														.clearValue();
												Ext.getCmp('child_id1').store
														.loadData(list2);
											}
										});

							}
						}
					}, {
						fieldLabel : "街道",
						xtype : 'combo',
						store : new Ext.data.SimpleStore({
									fields : ['id', 'name'],
									data : []
								}),
						valueField : "id",
						displayField : "name",
						// 数据是在本地
						mode : 'local',
						forceSelection : true,// 必须选择一项
						emptyText : '请选择街道...',// 默认值
						editable : false,// 不允许输入
						triggerAction : 'all',// 因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。
						allowBlank : false,// 该选项值不能为空
						id : 'child_id1',
						name : "street",
						hiddenName : "streetId"
					}, {
						fieldLabel : '房屋设施',
						xtype : 'textarea',
						name : 'housething'
					}],
			buttons : [{
				text : '保存',
				formBind : true,
				type : 'submit',
				// 定义表单提交事件
				handler : function() {
					if (insertForm.form.isValid()) {// 验证合法后使用加载进度条
						// 提交到服务器操作
						insertForm.form.doAction('submit', {
									url : 'house!saveOrUpdate.action',// 文件路径
									method : 'post',// 提交方法post或get
									params : '',
									// 提交成功的回调函数
									success : function(retForm, retAction) {
										Ext.MessageBox.alert('提示', '保存数据成功!');
										win.hide();
										var totalCount = ptb.store
												.getTotalCount();
										var pageSize = ptb.pageSize;
										var div = parseInt(totalCount
												/ pageSize);
										var mol = totalCount % pageSize;
										ptb.cursor = div * pageSize;
										ds.load({
													params : {
														start : ptb.cursor,
														limit : ptb.pageSize
													}
												});

									},
									failure : function() {
										Ext.Msg.alert('错误', '服务器出现错误请稍后再试!');
									},
									waitMsg : '保存数据...'
								});
					}
				}
			}, {
				text : '重置',
				handler : function() {
					insertForm.form.reset();
				}// 重置表单
			}, {
				text : '关闭',
				handler : function() {
					win.hide();
				}// 关闭窗口
			}]

		});
	}
	insertForm.show();
	return insertForm;
}


 

你可能感兴趣的:(ExtJs 经典布局(一))