标签：
前台页面
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
//定义列
var cm=new Ext.grid.ColumnModel([
{header:‘客户编号‘,dataIndex:‘id‘},
{header:‘客户姓名‘,dataIndex:‘name‘},
{header:‘联系电话‘,dataIndex:‘phone‘},
{header:‘房屋种类‘,dataIndex:‘type‘},
{header:‘月租‘,dataIndex:‘monthly‘},
{header:‘户型‘,dataIndex:‘house‘},
{header:‘建筑面积（平方米）‘,dataIndex:‘area‘},
{header:‘装修情况‘,dataIndex:‘fcondition‘},
{header:‘房屋地址‘,dataIndex:‘address‘},
{header:‘房屋情况‘,dataIndex:‘hcondition‘}
]);
//定义要显示的数据
var store=new Ext.data.Store({
//baseParams:{"hire.type.id":field3.getValue()},
proxy:new Ext.data.HttpProxy({url:‘hire!queryHouse.action‘}),
reader:new Ext.data.JsonReader({
// totalProperty:‘total‘,
root:‘root‘
},
[
{name:‘id‘},
{name:‘name‘},
{name:‘phone‘},
{name:‘type‘},
{name:‘monthly‘},
{name:‘house‘},
{name:‘area‘},
{name:‘fcondition‘},
{name:‘address‘},
{name:‘hcondition‘}
])}
);
//渲染
var grid=new Ext.grid.EditorGridPanel({
renderTo:‘right‘,
store:store,
cm:cm,
loadMask:true,
autoWidth:true,
height:400
});
//初始化
store.load();
//表单元素
var field1=new Ext.form.Field({
fieldLabel:‘建筑面积‘,
value:‘700‘,
name:‘hire.area‘,
msgTarget:‘qtip‘
});
var field2=new Ext.form.Field({
fieldLabel:‘每月价格‘,
name:‘hire.monthly‘,
value:‘800‘,
msgTarget:‘qtip‘
});
var field3=new Ext.form.ComboBox({
fieldLabel:‘房屋种类‘,
hiddenName:‘hire.typename‘,
mode : ‘remote‘,
maxHeight:100,
triggerAction : ‘all‘,
selectOnFocus : true,
forceSelection : true,
editable : false,
value:‘2‘,
store :[[‘1‘, ‘楼房‘], [‘2‘, ‘平房‘],[‘3‘, ‘其他‘]]
});
var field4=new Ext.form.ComboBox({
fieldLabel:‘户型‘,
hiddenName:‘hire.housename‘,
mode : ‘remote‘,
maxHeight:100,
triggerAction : ‘all‘,
selectOnFocus : true,
forceSelection : true,
editable : false,
value:‘4‘,
store :[[‘1‘, ‘一室一厅‘], [‘2‘, ‘两室一厅‘],[‘3‘, ‘三室一厅‘], [‘4‘, ‘独门独院‘], [‘5‘, ‘单间‘], [‘6‘, ‘其他‘]]
});
var field5 = new Ext.form.ComboBox( {
fieldLabel : ‘装修情况‘,
hiddenName:‘hire.fconditionname‘,
mode : ‘remote‘,
maxHeight:100,
triggerAction : ‘all‘,
selectOnFocus : true,
forceSelection : true,
editable : false,
value:‘2‘,
store :[[‘1‘, ‘无装修‘], [‘2‘, ‘简单装修‘],[‘3‘, ‘中档装修‘], [‘4‘, ‘高档装修‘]]
});
var form=new Ext.form.FormPanel({
defaultType:‘textfield‘,
url:‘hire!queryHouse.action‘,
buttonAlign:‘left‘,
title:‘出租房屋信息查询‘,
labelAlign:‘right‘,
frame:true,
autoWidth:true,
height:210,
items:[field1,field2,field3,field4,field5],
buttons:[{text:‘查询‘,
handler: function () {
form.getForm().submit({
waitMsg:‘查询中，请稍后...‘
});
}},{text:‘重置‘,
handler:function(){
form.getForm().reset();
}
}]
});
form.render("left");
//field1.markInvalid();
//field2.markInvalid();
});
</script>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
后台传回来的json数据
{root:[{id:‘4‘,name:‘老赵‘,phone:‘15844043554‘,type:‘平房‘,monthly:‘800.0‘,house:‘独门独院‘,area:‘700‘,fcondition:‘简单装修‘,address:‘襄阳市襄城区隆中路18号‘,hcondition:‘已出租‘},{id:‘10‘,name:‘老赵‘,phone:‘15844043554‘,type:‘平房‘,monthly:‘800.0‘,house:‘独门独院‘,area:‘700‘,fcondition:‘简单装修‘,address:‘襄阳市襄城区隆中路18号‘,hcondition:‘已出租‘},{id:‘16‘,name:‘老赵‘,phone:‘15844043554‘,type:‘平房‘,monthly:‘800.0‘,house:‘独门独院‘,area:‘700‘,fcondition:‘简单装修‘,address:‘襄阳市襄城区隆中路18号‘,hcondition:‘已出租‘},{id:‘22‘,name:‘老赵‘,phone:‘15844043554‘,type:‘平房‘,monthly:‘800.0‘,house:‘独门独院‘,area:‘700‘,fcondition:‘简单装修‘,address:‘襄阳市襄城区隆中路18号‘,hcondition:‘已出租‘}]}
请大家帮忙看看，谢谢
</body>
标签：
原文地址：http://www.cnblogs.com/22MM/p/5412556.html
