对Extjs的GridFilters的完美重写

posted by David Chen at June 26, 2008, 8:11 AM    

extjs提供的GridFilters生成的参数是这样的格式,不是php,非常难处理,特别深入看了它的源码,找到了重写的
方法,把生成的参数做成一般的格式,以方便java的处理.
原来的参数形式
parameterName parameterValue
filter[0][data][value] 55
filter[0][data][type] numeric
filter[0][field] id
filter[0][data][comparison] eq
是不是很乱,很头痛, 悔涩难懂,, 我更不知在java中如果去处理这种字串了,..汗一个...
改写后生成的参数形式
userTye 100,101
schoolId 2,8
sex 男,女
这种形式,比较易看懂吧 ...呵呵..

        // 这里是引入图片的设置,
 Ext.menu.RangeMenu.prototype.icons = {
  gt: '../../extjs/img/greater_then.png', 
  lt: '../../extjs/img/less_then.png',
  eq: '../../extjs/img/equals.png'
 };
 Ext.grid.filter.StringFilter.prototype.icon = '../../extjs/img/find.png';
 //Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
 //用cookie记下filter的输入或选择, 最好不要设置,不设的话，刷新时就不会自动填充以前的输入

 var filters = new Ext.grid.GridFilters({
   // 重写该方法，使用生成的参数为一般的格式, 需要自定义可选的paramName和paramValue属性
   buildQuery: function(filters) {
  // filters 就是getFilterData返回的值, 代码中push入去的对象
  var p = {};
  for(var i=0, len=filters.length; i<len; i++) {
      var f = filters[i];
      
      // 取得在GridFilters中定义的filters中的一个filter
      var filter = this.getFilter( f.field );
      // 取得传递到server的参数名称
      var name = (filter.paramName ? filter.paramName : filter.dataIndex);
      var value = (filter.paramValue ? filter.paramValue : f.data['value']);
      
      if( value != '' ) p[ name ] = value;
  }
  return p;
   },
          filters:[ // 这些列应和grid中的columns对应，而不应和store对应
            {type: 'string', dataIndex: 'userName', active: false },
            {type: 'string',  dataIndex: 'name', active: false},
            {type: 'string',  dataIndex: 'sex', active: false},
            {
              type: 'list',  // 定义为list类型
              active: false,
              dataIndex: 'sex', 
              options: [ ['男', '男'], ['女', '女'] ],
              phpMode: true // 如果是list，一定要开启为true, 不然多个checkbox只传第一个选中的值
            },
            {
              type: 'list',  // 定义为list类型
              active: false,
              dataIndex: 'userTypeName',
              paramName: 'userType',  // 自定义一个属性
              options: [ [100, '管理员'], [101, '校长'], [102, '老师'], [103, '学生'], [104, '其它'] ],
              phpMode: true
            },
            {
              type: 'list',  // 定义为list类型
              active: false,
              dataIndex: 'schoolName', 
              paramName: 'schoolId',
              labelField: 'schoolName', // 对应xml中的某一个Item的el名
              store: new Ext.data.Store({
                  url: '../school/schoolAction.evi?method=selectAllSchool',
                  fields: ['id', 'schoolName'],
                  reader: new Ext.data.XmlReader(
                      { record: "Item", id: 'schoolId' },
                      [ { name: 'schoolId', mapping: 'schoolId' },
                        { name: 'schoolName', mapping: 'schoolName' } ]
                  )
              }),
              phpMode: true
            }
        ]});
       // 以上代码的结果是, 这种结果完全符合java的使用。
       userTye  100,101
       schoolId 2,8
       sex 男,女