extjs grid搜索分页实例
<script type="text/javascript">
Ext.onReady(function(){
??? var ds = new Ext.data.Store({//这是数据源
??? ??? 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','telephone','station_status','headship'
????? ??? ])
??? });
??? var colModel = new Ext.grid.ColumnModel([//定义列
??? ??? ?{header:'ID',width:50,sortable:true,dataIndex:'user_id'},
??? ??? ?{id:'title',header:'用户名', width:100,sortable:true,dataIndex:'username'},
??? ??? ?{header:'真实姓名',width:100,sortable:true,dataIndex:'real_name'},
??? ??? ?{header:'电话',width:100,sortable:true,dataIndex:'telephone'},
??? ??? ?{header:'岗位状态',width:100,sortable:true,dataIndex:'station_status'},
??? ??? ?{header:'职务',width:100,sortable:true,dataIndex:'headship'}
??? ??? ]);
??? var tb = new Ext.Toolbar('north-div');//创建一个工具条
???
??? tb.add({
??? ??? text: '添加',
??????? handler: newUser
??? ??? },{
??????? text: '编辑',
??????? handler: editUser
??? ??? },{
??????? text: '删除',
??????? handler: delUser
??? });
??? ???
??? var grid = new Ext.grid.GridPanel({//列表
??? ??? ??? ??? border:false,
??? ??? ??? ??? region:'south',
??? ??? ??? ??? height:500,
??? ??? ??? ??? loadMask: true,
??? ??? ??? ??? el:'center',
??? ??? ??? ??? title:'条目列表',
??? ??? ??? ??? store: ds,
??? ??? ??? ??? cm: colModel,
??? ??? ??? ??? autoScroll: true,
??? ??? ??? ??? bbar: new Ext.PagingToolbar({
??? ??? ??? ??? ??? pageSize: 20,
??? ??? ??? ??? ??? store: ds,
??? ??? ??? ??? ??? displayInfo: true,
??? ??? ??? ??? ??? displayMsg: '第{0} 到 {1} 条数据 共{2}条',
??? ??? ??? ??? ??? emptyMsg: "没有数据"
??????? ??? ??? })
??????????? });
??? var top = new Ext.FormPanel({//这里是搜索表单
??????? buttonAlign:'right',
??? ??? labelWidth:70,
??? ??? region:'center',
??????? frame:true,
??????? title: '搜索',
??????? items: [{
??? ??????????? layout:'column',
??? ??????????? items:[{
??? ??????????????? columnWidth:.33,
??? ??????????????? layout: 'form',
??? ??????????????? items: [{
??? ??????????????????? xtype:'textfield',
??? ??????????????????? fieldLabel: '用户名',
??? ??????????????????? id: 'username',
??? ??? ??? ??? ??? ??? name: 'username',
??? ??????????????????? anchor:'90%'
??? ??????????????? }]
??? ??????????? },{
??? ??????????????? columnWidth:.33,
??? ??????????????? layout: 'form',
??? ??????????????? items: [{
??? ??????????????????? xtype:'textfield',
??? ??????????????????? fieldLabel: '姓名',
??? ??????????????????? name: 'real_name',
??? ??? ??? ??? ??? ??? id: 'real_name',
??? ??????????????????? anchor:'90%'
??? ??????????????? }]
??? ??????????? },{
??? ??????????????? columnWidth:.33,
??? ??????????????? layout: 'form',
??? ??????????????? items: [{
??? ??????????????????? xtype:'textfield',
??? ??????????????????? fieldLabel: 'Email',
??? ??????????????????? name: 'email',
??? ??? ??? ??? ??? ??? id: 'email',
??? ??????????????????? vtype:'email',
??? ??????????????????? anchor:'90%'
??? ??????????????? }]
??? ??????????? }]
??????? ??? }
??????? ],
??????? buttons: [{
??????????? text: '保存',
??? ??? ??? handler:function(){
??????????????????????????????? // 这里是关键，重新载入数据源，并把搜索表单值提交
??? ??? ??? ??? 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: '重置',
??? ??? ??? 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}});
??????? // 这里很关键，如果不加，翻页后搜索条件就变没了，这里的意思是每次数据载入前先把搜索表单值加上去，这样就做到了翻页保留搜索条件了
??? 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('400012','添加用户','index.php?model=user&action=add');
??? }
??? function editUser() {
??? ??? var s = grid.getSelectionModel().getSelections();
??? ??? if (s.length==0) {
??? ??? ??? Ext.Msg.alert('出错啦','你还没有选择要操作的记录！');
??? ??? }
??? ??? for (i=0;i<s.length;i++) {
??? ??? ??? var id = s[i].id;
??? ??? ??? parent.newTab('400012'+id,'编辑用户','index.php?model=user&action=add&user_id='+id);
??? ??? }
??? }
??? function delUser() {
??? ??? var ids = getId(grid);
??? ??? if (ids) {
??? ??? ??? Ext.Msg.confirm('确认', '真的要删除吗？', 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('出错啦','你还没有选择要操作的记录！');
??? ??? }
??? }
??? loadend();
});
</script>
<div id="north-div"></div>
<div id="center"></div>
