Extjs-GridFilters的使用与发现和PagingToolbar共用的bug

posted by David Chen at May 8, 2008, 4:40 AM    

这个GridFilters害我搞了一个早上,看了PagingToolba源码, 一个地一个地方的alert才发现有一个值是
undefine, 就是一个小问题,浪费了我半天时间, 大家使用filter的时候,最后看看后面那个bug.

不同类型的filter在extjs中定义有不同的功能，好像numeric有<,>,=的功能，
而boolean则有 yes,和no两个options选择，当然也可以自定义options, 选择不同
的option后，会做为参数和值传递到store中，如果是ajax,会自动刷新store,并将
参数传递. 注意要将 grid-filter的example中的grid,img,menu几个文件夹copy到
相应的目录下,否则会看不到图片的

 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());
        // 注意要先调用上面的代码，
        var filters = new Ext.grid.GridFilters({
          filters:[ // 这些列应和grid中的columns对应，而不应和store对应
            {type: 'numeric',  dataIndex: 'id'}, // 定义一个数字的filter,对应ColumnModel的列为 id 列
            {type: 'string',  dataIndex: 'company'},
            {type: 'numeric', dataIndex: 'price'},
            {type: 'date',  dataIndex: 'date'},
            {
              type: 'list',  // 定义为list类型
              dataIndex: 'size', 
              options: ['small', 'medium', 'large', 'extra large'],
              // 自定义显示的选项,未有找到相关的api说明，可能option也像html select的option一样,有text和value属性
              phpMode: true
            },
            {type: 'boolean', dataIndex: 'visible'}
        ]});
        在GridPanel中添加这项，plugins: filters, 注章，如果bbar指定了PagingToolbar的值，要注意给
        PagingToolbar 的plugins: filters也要同样定义，这样才能将选择后的参数传递
        
        filter传递到server端的参数名称是这样的:
        parameterName          parameterValue
        filter[0][data][value]      55
        filter[0][data][type]       numeric
        filter[0][field]            id
        filter[0][data][comparison] eq
        所以，不合一般应用，可修改GridFilters类的buildQuery 函数
        
        发现了2.1在PagingToolbar中使用filter后的bug
      PagingToolbar的 onLoad这个function有bug,在store第一次加载的时候,如果 
      store.load() 不指定 {params:{start: 0, limit: 15}} 作参数,
       在o.params[this.paramNames.start]得到undefine的值, 
       解决方法: 
       1) 第一次加载store的时候指定 {params:{start: 0, limit: 15}} 对象做参数
       2) 重写getPageData,在前面加上this.cursor = Ext.num( this.cursor, 0 );