Front Page
<script type= "Text/javascript" >
Ext.onready (function () {
Ext.QuickTips.init ();
Defining columns
var cm=new Ext.grid.ColumnModel ([
{header: ' Customer number ', Dataindex: ' ID '},
{header: ' Customer Name ', Dataindex: ' Name '},
{header: ' Contact phone ', dataindex: ' Phone '},
{header: ' House type ', Dataindex: ' Type '},
{header: ' monthly Rent ', Dataindex: ' Monthly '},
{header: ' Apartment ', Dataindex: ' House '},
{header: ' gfa (sq. m) ', Dataindex: ' Area '},
{header: ' decoration situation ', Dataindex: ' Fcondition '},
{header: ' Home Address ', Dataindex: ' Address '},
{header: ' Housing situation ', Dataindex: ' Hcondition '}
]);
Define the data to display
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 '}
])}
);
Rendering
var grid=new Ext.grid.EditorGridPanel ({
Renderto: ' Right ',
Store:store,
CM:CM,
Loadmask:true,
Autowidth:true,
height:400
});
Initialization
Store.load ();
Form elements
var field1=new Ext.form.Field ({
Fieldlabel: ' Building area ',
Value: ' 700 ',
Name: ' Hire.area ',
Msgtarget: ' Qtip '
});
var field2=new Ext.form.Field ({
Fieldlabel: ' Monthly price ',
Name: ' Hire.monthly ',
Value: ' 800 ',
Msgtarget: ' Qtip '
});
var field3=new Ext.form.ComboBox ({
Fieldlabel: ' House type ',
Hiddenname: ' Hire.typename ',
Mode: ' Remote ',
MAXHEIGHT:100,
TriggerAction: ' All ',
Selectonfocus:true,
Forceselection:true,
Editable:false,
Value: ' 2 ',
Store: [[' 1 ', ' Building '], [' 2 ', ' Cottage '],[' 3 ', ' other ']
});
var field4=new Ext.form.ComboBox ({
Fieldlabel: ' type ',
Hiddenname: ' Hire.housename ',
Mode: ' Remote ',
MAXHEIGHT:100,
TriggerAction: ' All ',
Selectonfocus:true,
Forceselection:true,
Editable:false,
Value: ' 4 ',
Store: [[' 1 ', ' one room, one hall '], [' 2 ', ' two rooms and one hall '],[' 3 ', ' three rooms and one hall '], [' 4 ', ' detached '], [' 5 ', ' Studio '], [' 6 ', ' other ']
});
var field5 = new Ext.form.ComboBox ({
Fieldlabel: ' Decoration situation ',
Hiddenname: ' Hire.fconditionname ',
Mode: ' Remote ',
MAXHEIGHT:100,
TriggerAction: ' All ',
Selectonfocus:true,
Forceselection:true,
Editable:false,
Value: ' 2 ',
Store: [[' 1 ', ' no decoration '], [' 2 ', ' Simple fitting '],[' 3 ', ' mid-range decoration '], [' 4 ', ' upscale decoration ']
});
var form=new Ext.form.FormPanel ({
DefaultType: ' TextField ',
URL: ' Hire!queryhouse.action ',
Buttonalign: ' Left ',
Title: ' Rental Housing information enquiry ',
LabelAlign: ' Right ',
Frame:true,
Autowidth:true,
height:210,
ITEMS:[FIELD1,FIELD2,FIELD3,FIELD4,FIELD5],
Buttons:[{text: ' Query ',
Handler:function () {
Form.getform (). Submit ({
Waitmsg: ' In the query, please later ... '
});
}},{text: ' Reset ',
Handler:function () {
Form.getform (). reset ();
}
}]
});
Form.render ("left");
Field1.markinvalid ();
Field2.markinvalid ();
});
</script>
<body>
<div id= "left" ></div>
<div id= "right" ></div>
JSON data sent back from the background
{root:[{id: ' 4 ', Name: ' Lao Zhao ', Phone: ' 15844043554 ', type: ' Cottage ', Monthly: ' 800.0 ', House: ' Unique detached ', area: ' A ', ' fcondition: ' Simple decoration ', Address: ' Xiangyang City Xiangcheng District Long Zhong Road No. 18th ', Hcondition: ' has been rented '},{id: ' Ten ', Name: ' Lao Zhao ', Phone: ' 15844043554 ', type: ' Bungalow ', Monthly: ' 800.0 ', House: ' Unique detached ', area: ' The ', ' fcondition: ' Simple decoration ', Address: ' Xiangyang City Xiangcheng District Long Zhong Road 18th ', Hcondition: ' Leased '},{id: ' + ', Name: ' Lao Zhao ', Phone: ' 15844043554 ', type: ' Cottage ', Monthly: ' 800.0 ', House: ' Unique detached ', area: ' The ' ", Fcondition: ' Simple decoration ', Address: ' Xiangyang City Xiangcheng District Long Zhong Road No. 18th ', Hcondition: ' Leased '},{id: ' $ ', Name: ' Lao Zhao ', Phone: ' 15844043554 ', type: ' Cottage ', Monthly: ' 800.0 ', House: ' Detached ', area: ' 700 ', Fcondition: ' Simple decoration ', Address: ' No. 18th, Xiangcheng District Long Zhong Road, Xiangyang City ', hcondition: ' Rented '}]
Please help to see, thank you
</body>
Back to the JSON data, the foreground ext grid is not displayed