Extjs4.2 Grid Filter Feature 表格过滤特性

来源：互联网发布：js修改url 不跳转编辑：程序博客网时间：2024/06/10 00:32

Extjs4.2 Grid Filter Feature 表格过滤特性

写在前面

从官方sdk中ext-4.2.1.883\examples\grid-filtering中的例子，在我的firefox环境下数据是无法加载的，看不到过滤效果；并且我需要将单个页面改造成MVC形式,因此做个一个MVC形式的过滤实验GridFilterDemo。Extjs的一些实验有时候会因为小问题而无法展现效果，这里采取逐步说明的方式记录下来以供所需者参考。这篇博客侧重点在于应用，关于Sencha cmd 和Extjs grid的相关理论请参考相关资料，此处不做介绍。

重要提醒:

1.Extjs过滤效果依赖于Ext.ux.grid.FiltersFeature、Ext.ux.grid.filter.*、Ext.ux.grid.menu.*包，如果效果出不来请确认你是否require了这些包。

2.filter属性的配置config也是很重要的，即使导入了依赖包，没有正确配置filter效果依然出不来。

3.确保你的MVC模式中的store、view工作正常。

开发环境:

Extjs-4.2.1.883+Sencha Cmd v4.0.4.84

测试环境:

Tomcat7.0+firefox

实验项目(仅包含app和build目录，ext目录过大并且与主题无关略去)

下载地址：http://download.csdn.net/detail/ziyuanxiazai123/7748337 。

1.实验效果

图1 ：ID字段过滤效果

图2: Size字段list过滤

图3 : company字符串过滤

2.构造你的工程

Step1 : sencha cmd 构造项目

进入Extjs SDK目录，使用sencha cmd 构造项目，项目名为GridFilterDemo,windows下命令执行如下图所示:

生成的目录结构如下图所示:

Step2 : 编写项目文件

我们进入app目录下，(windows使用tree /F 命令查看文件夹目录树)项目最终文件如下图所示:

虽然文中提供了下载链接，这里还是将文件一一列举出来，并进行说明，以帮助学习，主要是为了防止出错时束手无策。

文件1 Application.js 注意包含相关的view和store.

<span style="color:#000000;">Ext.define('GridFilterDemo.Application', {    name: 'GridFilterDemo',    extend: 'Ext.app.Application',        views: [        'Grid','Main'    ],    controllers: [            ],    stores: ['ProductStore'    ]});</span>

文件2 model Product.js 定义Product model用做数据模型。

//define a modelExt.define('GridFilterDemo.model.Product', {extend: 'Ext.data.Model',fields: [{name: 'id',type: 'int'}, {name: 'company'}, {name: 'price',type: 'float'}, {name: 'date',type: 'date',dateFormat: 'Y-m-d'}, {name: 'visible',type: 'boolean'}, {name: 'size'}]});

文件3 store ProductStore.js 注意这里的proxy访问的是grid-filter.json，这是一个包含json格式数据的文件。

Ext.define('GridFilterDemo.store.ProductStore', {extend : "Ext.data.Store",// store configsautoDestroy: true,autoLoad :true,model: 'GridFilterDemo.model.Product',proxy: {type: 'ajax',url: "grid-filter.json",reader: {type: 'json',root: 'data',idProperty: 'id',totalProperty: 'total'}},sorters: [{property: 'company',direction: 'ASC'}],pageSize: 50});

文件4 view Main.js 需要将grid panel添加到视图中。

Ext.define('GridFilterDemo.view.Main', {    extend: 'Ext.container.Container',    requires:[        'Ext.tab.Panel',        'Ext.layout.container.Border','GridFilterDemo.view.Grid'    ],        xtype: 'app-main',    layout: {        type: 'border'    },    items: [{        region: 'west',        xtype: 'panel',        title: 'west',        width: 150    },{        region: 'center',        xtype: 'app-gridpanel' //include gird panel    }]});

文件5 view Grid.js

这个文件是核心，注意requires数组中的依赖包，并且注意feature中filter的配置，以Extjs4.2的文档为标准。

这里的List filter中使用的数据是本地的options中配置的数组，关于如何使用remote模式，请参看官方文档。

 Ext.define('GridFilterDemo.view.Grid', {    extend : "Ext.grid.Panel",xtype : "app-gridpanel",//important ,required lib declarationrequires :[   "Ext.ux.grid.FiltersFeature",   "Ext.toolbar.Toolbar",   "Ext.ux.grid.filter.*",   "Ext.ux.grid.menu.*"],        border: false,        store: "ProductStore",loadMask: true,        features: {ftype: 'filters',            local: true,encode : false,filters: [{type: 'boolean',dataIndex: 'visible'            }]        },        columns: [{            dataIndex: 'id',            text: 'Id',            // instead of specifying filter config just specify filterable=true            // to use store's field's type property (if type property not            // explicitly specified in store config it will be 'auto' which            // GridFilters will assume to be 'StringFilter'            filterable: true,            width: 30            //filter: {type: 'numeric'}        }, {            dataIndex: 'company',            text: 'Company',            id: 'company',            flex: 1,            filter: {                type: 'string'            }        }, {            dataIndex: 'price',            text: 'Price',            filter: {                type: 'numeric'  // specify type here or in store fields config            },            width: 70        }, {            dataIndex: 'size',            text: 'Size',            filter: {                type: 'list',                phpMode: true,// options will be used as data to implicitly creates an ArrayStoreoptions: ['extra small', 'small', 'medium','large', 'extra large']            }        }, {            dataIndex: 'date',            text: 'Date',            filter: true,            renderer: Ext.util.Format.dateRenderer('m/d/Y')        }, {            dataIndex: 'visible',            text: 'Visible'            // this column's filter is defined in the filters feature config        }],        emptyText: 'No Matching Records'    });

文件6 grid-filter.json

这里Product Store读取的json 文件是SDK ext-4.2.1.883\examples\grid-filtering 中的grid-filter.json，截取部分以作示例:

{
   "total":"27",
   "data":[
      {
         "id":"1",
         "price":"71.72",
         "company":"3m Co",
         "date":"2007-09-01",
         "size":"large",
         "visible":"1"
      },
      {
         "id":"2",
         "price":"31.61",
         "company":"AT&T Inc.",
         "date":"2008-02-01",
         "size":"extra large",
         "visible":"0"
      }

]

}

Step 3 : 编译工程

利用sencha cmd 编译整个项目，如下图所示:

编译完毕后可到build目录下查看生成的项目,到这里还没有结束。

Step4 : 关于Ext.ux中的css 和image的补救措施

编译完项目后，由于使用了Ext.ux拓展包，其中一些css和image没有在编译阶段自动包含进来，这里采取一种补救措施，手动将其包括进来。具体步骤:

1)到项目ext\src\ux\grid目录下，文件如下图所示:

将CSS 和image拷贝到生成的工程中去,并将css连接到html文件中。最终的index.html文件如下：

<!DOCTYPE HTML><html><head>    <meta charset="UTF-8">    <title>GridFilterDemo</title><link rel="stylesheet" href="resources/GridFilterDemo-all.css"/><link rel="stylesheet" href="resources/GridFilters.css"/><link rel="stylesheet" href="resources/RangeMenu.css"/><script type="text/javascript" src="app.js"></script></head><body></body></html>

当然，还有一些其他的补救措施，这里不做介绍，你可以参看: How to include the gridfilters ux images?

Ok,到这里终于结束了。你可以将生成的工程拷贝到服务器目录下运行测试。

3. 参考资料

1)Extjs4.2 官方文档条目之 ext-4.2.1.883/docs/index.html#!/api/Ext.ux.grid.FiltersFeature

2) EXTJS4 Grid Filter 插件的使用

3)http://stackoverflow.com/questions/7359512/how-to-use-filters-in-a-gridpanel

4)http://stackoverflow.com/questions/10308018/how-do-you-include-a-ux-class-in-the-mvc-pattern

5)http://www.sencha.com/forum/archive/index.php/t-275796.html?s=a87a306255ff1f75020fcfe3a1ad9bfb

6) http://gridsearch.extjs.eu/

0 0