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的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;
}