extjs grid 搜索 分页

lihao130999580

<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.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>