Grid Filters Example

1.除了引入ext-all.js外，另需引入扩展组件.

<script type="text/javascript" >
            Ext.Loader.setConfig({enabled: true});    
            Ext.Loader.setPath('Ext.ux', webroot+'/web/elane/ext-4.2.0/ux/'); 
            Ext.require([
                         'Ext.grid.*',
                         'Ext.data.*',
                         'Ext.ux.grid.FiltersFeature',
                         'Ext.toolbar.Paging',
                         'Ext.ux.ajax.JsonSimlet',
                         'Ext.ux.ajax.SimManager'
                     ]);
  </script>

2.gridd的配置

grid = Ext.create('Ext.grid.Panel', {
                renderTo : "testDiv",
                id            : 'DynamicGrid', 
                store        : jsonStore, 
                plugins : 'bufferedrenderer',
                columnLines    : true, 
                title        : "testGrid", 
                selModel    : sm, 
                columns        : [{
                          text     : '名称',
                          cls     : 'x-column-header-align-default',
                          width    : 150,
                          menuDisabled : false,
                          dataIndex: 'name',
                          filter : {
                            type : 'string' //筛选类型
                        }
                  },{
                      text     : '金额',
                      cls     : 'x-column-header-align-default',
                      width    : 150,
                      align: 'right',
                      hideable: false,
                      menuDisabled : false,
                      dataIndex: 'MONEY'
                  },{
                      text     : '时间',
                      cls     : 'x-column-header-align-default',
                      width    : 120,
                      menuDisabled : false,
                      dataIndex: 'TIME'
                 }], 
                height        : 600, 
                width        : 500, 
                enableLocking : false,
                enableColumnMove : true,
                enableColumnResize: true,
                  rowNumberer : 0,
                 features: [{//筛选配置
                     ftype: 'filters',  
                     encode: true,
                     local: false,  
                     filters: [  
                        {  
                            type: 'numeric', dataIndex: 'MONEY'  //也可在这里定义筛选类型
                        },
                        {
                            type: 'date', dataIndex: 'TIME'
                        }
                     ],
                     buildQuery: function(filters) {//筛选调用的方法
                        var reStr = {};
                        var str = '';
                        for(var i=0, len=filters.length; i<len; i++) {
                            //f.data.value 筛选的值
                            //f.data.type 筛选类型
                            str=str+filterBuildSql(filters[i], '', '');
                        }
                        reStr['reQuery'] = str;//设置传递后台的值
                        return reStr;
                     }
                    }],
                viewConfig    : {
                    autoScrool: true,
                    trackOver: false,
                    forceFit:false
                }
                ,
                tbar: pageBar
            }); 

3.后台获取方法
　　

String filterValue = request.getParameter("reQuery");