ExtJs 经典布局(一)

 

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的nameeditable : 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或getparams : '',// 提交成功的回调函数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;}