Go to: gird with search page

<SCRIPT type = "text/JavaScript">
Ext. onready (function (){
VaR DS = new Ext. Data. Store ({// This is the data source
Proxy: New Ext. Data. httpproxy ({URL: 'index. php? Model = user & Action = List &'}),
Reader: New Ext. Data. jsonreader ({
Root: 'topics ',
Totalproperty: 'totalcount ',
ID: 'user _ id'
},[
'User _ id', 'username', 'real _ name', 'telphone', 'Station _ status', 'headship'
])
});

VaR colmodel = new Ext. Grid. columnmodel ([// defines a column
{Header: 'id', width: 50, sortable: True, dataindex: 'user _ id '},
{ID: 'title', header: 'username', width: 100, sortable: True, dataindex: 'username '},
{Header: 'real name', width: 100, sortable: True, dataindex: 'real _ name '},
{Header: 'tele', width: 100, sortable: True, dataindex: 'telphone '},
{Header: 'Post status', width: 100, sortable: True, dataindex: 'Station _ status '},
{Header: 'job', width: 100, sortable: True, dataindex: 'headship '}
]);
VaR TB = new Ext. toolbar ('North-Div '); // create a toolbar

TB. Add ({
Text: 'add ',
Handler: newuser
},{
Text: 'editor ',
Handler: edituser
},{
Text: 'delete ',
Handler: deluser
});

VaR grid = new Ext. Grid. gridpanel ({// list
Border: false,
Region: 'south ',
Height: 500,
Loadmask: True,
El: 'center ',
Title: 'entry list ',
Store: ds,
CM: colmodel,
Autoscroll: True,
Bbar: New Ext. pagingtoolbar ({
Pagesize: 20,
Store: ds,
Displayinfo: True,
Displaymsg: '{ 0} to {1} pieces of data {2 ',
Emptymsg: "No data"
})
});
VaR Top = new Ext. formpanel ({// here is the search form
Buttonalign: 'right ',
Labelwidth: 70,
Region: 'center ',
Frame: True,
Title: 'search ',
Items :[{
Layout: 'column ',
Items :[{
Columnwidth:. 33,
Layout: 'form ',
Items :[{
Xtype: 'textfield ',
Fieldlabel: 'username ',
ID: 'username ',
Name: 'username ',
Anchor: '000000'
}]
},{
Columnwidth:. 33,
Layout: 'form ',
Items :[{
Xtype: 'textfield ',
Fieldlabel: 'name ',
Name: 'real _ name ',
ID: 'real _ name ',
Anchor: '000000'
}]
},{
Columnwidth:. 33,
Layout: 'form ',
Items :[{
Xtype: 'textfield ',
Fieldlabel: 'email ',
Name: 'email ',
ID: 'email ',
Vtype: 'email ',
Anchor: '000000'
}]
}]
}
],

Buttons :[{
Text: 'save ',
Handler: function (){
// The key here is to reload the data source and submit the search form value
DS. Load ({Params: {start: 0, limit: 20,
Username: Ext. Get ('username'). Dom. value,
Real_name: Ext. Get ('real _ name'). Dom. value,
Email: Ext. Get ('email '). Dom. Value }});
}
},{
Text: 'reset ',
Handler: function () {top. Form. Reset ();}
}]
});
VaR viewport = new Ext. viewport ({
Layout: 'border ',
Items :[{
Border: false,
Region: 'north ',
Contentel: 'North-Div ',
Tbar: Tb,
Height: 26
}, Top,
Grid
]}
);
DS. Load ({Params: {start: 0, limit: 20 }});
// The Key is here. If no value is added, the search condition will be lost after the page is turned over. This means that the search form value is added before each data loading, in this way, the search conditions are retained by turning pages.
DS. On ('beforeload', function (){
Ext. Apply (
This. baseparams,
{
Username: Ext. Get ('username'). Dom. value,
Real_name: Ext. Get ('real _ name'). Dom. value,
Email: Ext. Get ('email '). Dom. Value
});
});
Function newuser (){
Parent. newtab ('20140901', 'add user', 'index. php? Model = user & Action = add ');
}
Function edituser (){
VaR S = grid. getselectionmodel (). getselections ();
If (S. Length = 0 ){
Ext. msg. Alert ('error occurred, 'You have not selected the record to operate! ');
}
For (I = 0; I <S. length; I ++ ){
VaR id = s [I]. ID;
Parent. newtab ('20140901' + id, 'edit user', 'index. php? Model = user & Action = add & user_id = '+ id );
}
}
Function deluser (){
VaR IDs = GETID (GRID );
If (IDS ){
Ext. msg. Confirm ('confirmed', 'Are you sure you want to delete it? ', Function (BTN ){
If (BTN = 'yes '){
Ext. Ajax. Request ({
URL: 'index. php? Model = user & Action = Delete & IDs = '+ IDs,
Success: function (result ){
JSON = ext. util. JSON. Decode (result. responsetext );
DS. Reload ();
}
});
}
});
} Else {
Ext. msg. Alert ('error occurred, 'You have not selected the record to operate! ');
}
}
Loadend ();
});
</SCRIPT>
<Div id = "North-Div"> </div>
<Div id = "center"> </div>