带搜索功能的grid分页实例

本实例将在带分页的表格基础上进行扩展，增加搜索功能。由于本实例采用fleaphp+ext制作，故本实例将只贴出核心的代码，不提供源码打包下载了（见谅）。部分参考自志凡的extjs grid搜索分页实例。下面先看下服务端的核心代码，这里采用PHP：
   /**
     * 留言列表
     */
    function actionList() {
           $modelBO = & FLEA::getSingleton('Model_board');
           load_class('FLEA_Helper_Pager');
           $page = isset($_REQUEST['start']) ? (int)$_REQUEST['start']-1 : 0;

           //若搜索字段为空及表格初始化时，显示全部记录，否则根据title搜索
           $str = null;
           if ($_REQUEST['title']) {//接受传送过来的title值
              $str = ' title like '%'. trim($_REQUEST['title']) .'%'';
           }
           $pager= new FLEA_Helper_Pager($modelBO,$page,20,$str,'board_id DESC');
           $posts = $pager->findAll();
           $post_arr = array('0'=>'未回复','1'=>'已回复');

           foreach ($posts as $val2) {
               $temp['board_id'] = $val2['board_id'];
               $temp['title'] = $val2['title'];
               $temp['comment'] = $val2['comment'];
               $temp['is_post'] = $post_arr[$val2['is_post']];
               $temp['post_comment'] = $val2['post_comment'];
               $temp['add_time'] = $val2['add_time'];
               $temp['add_user'] = $val2['add_user'];
               $new_arr[] = $temp;
           }


           $result['topics'] = $new_arr;
           $js=count($modelBO->findAll());
           $result['totalCount'] = $js;
           require('./common/Json.php');
           $json = new Services_JSON();
           echo $json->encode($result);
    }

     实际上就是服务端接受ext搜索表单传送的值，搜索相应记录返回即可，在看下客户端js代码：


      Ext.onReady(function(){
    var ds = new Ext.data.Store({
        proxy : new Ext.data.HttpProxy({url:'index.php?controller=board&action=list'}),
        reader: new Ext.data.JsonReader({
            root: 'topics',
            totalProperty: 'totalCount',
            id: 'board_id'
            },[
            'board_id','title','is_post','add_time','add_user'
          ])
    });

    var colModel = new Ext.grid.ColumnModel([
         new Ext.grid.RowNumberer(),
         {header:'ID',width:50,sortable:true,dataIndex:'board_id'},
         {header:'标题', width:300,sortable:true,dataIndex:'title'},
         {header:'作者', width:150,sortable:true,dataIndex:'add_user'},
         {header:'是否回复',width:100,sortable:true,dataIndex:'is_post'},
         {header:'发布时间',width:200,sortable:true,dataIndex:'add_time'}
        ]);

    //设置搜索表单
    var s_pannel = new Ext.FormPanel({
        baseCls: 'x-plain',
        defaults: {width: 150},
        defaultType: 'textfield',
        items: [{
                fieldLabel: '标题',
                id:'title',
                name: 'title'
            }]
    });

    var grid = new Ext.grid.GridPanel({
                border:false,
                buttonAlign :'left',
                region:'center',
                loadMask: true,
                store: ds,
                cm: colModel,
                autoScroll: true,
                tbar: [
                   s_pannel,//搜索表单
                   {
                       text: '搜索',
                          handler:function(){
                             // 这里是关键，重新载入数据源，并把搜索表单值提交
                             ds.load({
                                     params:{start:0, limit:20,
                                         title:Ext.get('title').dom.value//取得搜索表单文本域的值，发送到服务端
                                     }
                                 })
                          }
                   }
                ],
                bbar: new Ext.PagingToolbar({
                    pageSize: 20,
                    store: ds,
                    displayInfo: true,
                    displayMsg: '第{0} 到 {1} 条数据 共{2}条',
                    emptyMsg: "没有数据"
                })
            });

    var viewport = new Ext.Viewport({
        layout:'border',
        items:[grid]
        });

    ds.load({params:{start:0, limit:20, forumId: 4}});
    // 这里很关键，如果不加，翻页后搜索条件就变没了，这里的意思是每次数据载入前先把搜索表单值加上去，
    // 这样就做到了翻页保留搜索条件了
    ds.on('beforeload',function(){
      Ext.apply(
      this.baseParams,
      {
           title:Ext.get('title').dom.value
      });
    });

    //end loding
    setTimeout(
                function() {
                    Ext.get('loading').remove();
                    Ext.get('loading-mask').fadeOut({remove:true});
                }, 250
              );
});