`
zha_zi
  • 浏览: 585007 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

EXTJS4 Grid Filter 插件的使用

 
阅读更多

     EXT4 中提供的grid过滤插件，可以在列中直接过滤数据，文字等不同类型。

按照EXT提供的示例发现很难实现官方的功能，在google上搜索了一下发现有很多人包括国外的开发人员也遇到这样的问题

我按照官方提供的例子弄了一下第一遍也是没有成功，仔细分析了一下这东西的使用的EXT的普通控件有所不同。

 

1：FiltersFeature 

       这个东西需要单独引入一下，此类数据ux 扩展包，所以按照例子照搬是没有用的，首先需要重开发包中找到examples\ux 下的所有文件移到你需要的指定地址，然后倒入'Ext.ux.grid.FiltersFeature' 这个类即可

Ext.Loader.setPath('Ext.ux','/ext/ux');  //设置的命名空间路径

 

2：样式问题

       <link rel="stylesheet" type="text/css" href="<%=path%>/ext/ux/grid/css/GridFilters.css" />

        <link rel="stylesheet" type="text/css" href="<%=path%>/ext/ux/grid/css/RangeMenu.css" />

 

最后就是按照例子中的代码写就可以实现其功能了。

 

 
 
Ext.define("view.monitor.realtimedata.RealtimePointGrid",{
	extend:'Ext.grid.Panel', 
	alias:'widget.realtimepointgrid',
	initComponent:function(){ 
		var encode = false;
		var local = true;
		var filters = {
	        ftype: 'filters',
	        // encode and local configuration options defined previously for easier reuse
	        encode: encode, // json encode the filter query
	        local: local,   // defaults to false (remote filtering)
	
	        // Filters are most naturally placed in the column definition, but can also be
	        // added here.
	        filters: [
	            {
	                type: 'boolean',
	                dataIndex: 'visible'
	            }
	        ]
	    };
		
		var realtimeInterval=null; 
		var store=Ext.create('Ext.data.Store',{
			fields:['dotType','dotName','dotValue','alarmTime','alarmStatus','dataType','data','pointId','pointType']
			//data:recArray
		});
		Ext.apply(this, { 
			store:store,
			autoScroll:true,
			features: [filters],
			tbar:[ 
			      {xtype:'button',text:'查看设备故障',name:'btDeviceFault', icon:iconPath+'wrench_orange.png'}
			      ],
			columns:[
			         //new Ext.grid.RowNumberer({header:'编号',width:50}),
			         {xtype:'rownumberer',header:'编号',width:40,renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
			        	 return rowIndex+1;
			        	 }},
			         {text:'测点类型',width:200,sortable:true,dataIndex:'dotType', filterable: true},
			         {text:'测点名称',width:200,sortable:true,dataIndex:'dotName',filter: {
		                type: 'string'
		                // specify disabled to disable the filter menu
		                //, disabled: true
		             }},
			         {text:'监测值',width:150,sortable:true,dataIndex:'dotValue',renderer:function(value ,metaData ,record ){
			         	 return value+record.data.dotUnit;
			         }, filter: {
			                type: 'numeric'  // specify type here or in store fields config
			            }
			         },
			         {text:'告警时间',width:150,sortable:true,dataIndex:'alarmTime',    format: 'Y-m-d h:i:s'},
			         {text:'状态',width:200,sortable:true,dataIndex:'alarmStatus', filter: true,},
			         {	header:'操作',
				            xtype:'actioncolumn',
				            width:100,
				            items: [{
				                icon: './resources/images/warn.png',  // Use a URL in the icon config
				                tooltip: '告警确认',
				                style: {marginRight:'100px'}
				            },{
				                icon: './resources/images/edit.gif',  // Use a URL in the icon config
				                tooltip: '告警定位',
				                style: {marginRight:'100px'}
				            },{
				                icon: './resources/images/emos.png',  // Use a URL in the icon config
				                tooltip: '告警派单',
				                style: {marginRight:'100px'}
				            }]}
			         ],
			listeners:{
				destroy:function(){
					clearInterval(realtimeInterval);
				},
				afterrender:function(){
				 
					/**
					 * 定时刷新grid数据
					 */
					 var id=this.up().up().name;
					 realtimeInterval=  setInterval(function() { 
						  	store.loadData(filterPointArray(id,recArray));
						  
					 },2000);
				}
			}
		});
		this.callParent(arguments); 
		
	}
});

 效果如下


  • 大小: 37.7 KB
分享到：
| JS NameSpace
评论
17 楼 hy1235366 2016-08-18  
我按照你的例子和官方4.1.3例子都提示SCRIPT438: Object doesn't support property or method 'setMenu'，FiltersFeature.js (322,17) 这到底怎么回事啊！ 谁能回答我
16 楼 gq2010 2014-03-29  
grid要求可以保存状态,grid保存状态时可以将过滤信息保存起来,但是再次加载的时候,过滤信息也读取出来了,但是grid的数据并不是经过过滤后的,而且表头的菜单的过滤信息也没有记录状态
15 楼 zha_zi 2013-10-30  
iiwahaha 写道
zha_zi 写道
云亦飞 写道
测试了一下，只能过滤出当前页下的数据。
但是测试了一下remote的方式，又根本不能过滤~求解~
官方的例子里也只写了local的啊。。。这蛋疼的

稍微改造一下就行了



您好，请问 这个问题如何改造呢？



刚才我试了一下local:false 这个就可以直接调用remote 数据，不用搞这么麻烦，我用的是4.0.7版本，真不行就用我说的这种稍微麻烦一点的我已经试过也是可以的也很简单
14 楼 zha_zi 2013-10-30  
iiwahaha 写道
zha_zi 写道
云亦飞 写道
测试了一下，只能过滤出当前页下的数据。
但是测试了一下remote的方式，又根本不能过滤~求解~
官方的例子里也只写了local的啊。。。这蛋疼的

稍微改造一下就行了



您好，请问 这个问题如何改造呢？

好久不搞这个东西了，好几个人都问道到底如何实现远程过滤，今天回过头仔细看了一下源代码。
/**
     * @cfg {Boolean} local
     * <tt>true</tt> to use Ext.data.Store filter functions (local filtering)
     * instead of the default (<tt>false</tt>) server side filtering.
     */
    local : false,
这是官方的源码，默认就是远程过滤，其实就是通过store 重新load 的数据然后过滤，我没有试过，因为我们项目中不需要remote 方式，如果不行也很正常，因为extjs-4.0 版本中有大量的bug，
我看了filter的源代码结构，其实实现思路比较简单，通过string，number，boolean 等不同数据格式构建不同menu 下拉菜单，然后通过keydown 事件过滤store内容，

实在是官方有问题了的话，一下是一种解决思路，重写filter插件
在EXT example下的ux 文件夹，其中有filter插件的源码，里边设计的filter 的类大概有十几个，结构非常简单，你只需要在重写ListFilter类中的 createMenu方法即可，或者重写 FiltersFeature类中的createMenuItem重写的思路就是在获取menu 数组重新绑定事件，当keydown事件 中获取数值然后阻断源代码的事件冒泡，你通过ajax 查询后台结果重新加载grid 的store 即可，
13 楼 zha_zi 2013-10-30  
好久不搞这个东西了，好几个人都问道到底如何实现远程过滤，今天回过头仔细看了一下源代码。
/**
     * @cfg {Boolean} local
     * <tt>true</tt> to use Ext.data.Store filter functions (local filtering)
     * instead of the default (<tt>false</tt>) server side filtering.
     */
    local : false,
这是官方的源码，默认就是远程过滤，其实就是通过store 重新load 的数据然后过滤，我没有试过，因为我们项目中不需要remote 方式，如果不行也很正常，因为extjs-4.0 版本中有大量的bug，
我看了filter的源代码结构，其实实现思路比较简单，通过string，number，boolean 等不同数据格式构建不同menu 下拉菜单，然后通过keydown 事件过滤store内容，

实在是官方有问题了的话，一下是一种解决思路，重写filter插件
在EXT example下的ux 文件夹，其中有filter插件的源码，里边设计的filter 的类大概有十几个，结构非常简单，你只需要在重写ListFilter类中的 createMenu方法即可，或者重写 FiltersFeature类中的createMenuItem重写的思路就是在获取menu 数组重新绑定事件，当keydown事件 中获取数值然后阻断源代码的事件冒泡，你通过ajax 查询后台结果重新加载grid 的store 即可，
12 楼 iiwahaha 2013-10-30  
zha_zi 写道
云亦飞 写道
测试了一下，只能过滤出当前页下的数据。
但是测试了一下remote的方式，又根本不能过滤~求解~
官方的例子里也只写了local的啊。。。这蛋疼的

稍微改造一下就行了



您好，请问 这个问题如何改造呢？
11 楼 zha_zi 2013-01-08  
云亦飞 写道
测试了一下，只能过滤出当前页下的数据。
但是测试了一下remote的方式，又根本不能过滤~求解~
官方的例子里也只写了local的啊。。。这蛋疼的

稍微改造一下就行了
10 楼 云亦飞 2013-01-06  
测试了一下，只能过滤出当前页下的数据。
但是测试了一下remote的方式，又根本不能过滤~求解~
官方的例子里也只写了local的啊。。。这蛋疼的
9 楼 zha_zi 2012-12-26  
To_Utopia 写道
hello, 高手，问个问题啊， 你这个颜色是怎么更改的啊？ 如何指定样式? 解决方法可以发到我邮箱 qingliu_134@126.com  多谢

这个很简单了，两种办法，一种就是美工直接修改源码的样式，那么所有引用的都会修改掉，还有一种就是美工新建演示然后你动态修改cls
8 楼 To_Utopia 2012-12-24  
hello, 高手，问个问题啊， 你这个颜色是怎么更改的啊？ 如何指定样式? 解决方法可以发到我邮箱 qingliu_134@126.com  多谢
7 楼 苦逼烟酒生 2012-11-22  
依然感谢你 高手 
6 楼 zha_zi 2012-11-22  
苦逼烟酒生 写道
高手 这个过滤功能是只能过滤当前页面的数据还是全局的都可以过滤？

好像是当前的，因为我使用的场景是未分页的，具体在分页环境下我也不清楚
5 楼 苦逼烟酒生 2012-11-22  
高手 这个过滤功能是只能过滤当前页面的数据还是全局的都可以过滤？
4 楼 zha_zi 2012-11-22  
苦逼烟酒生 写道
我用的是MVC架构在GRIDPANEL中加了 Ext.require([ 
    'Ext.ux.grid.FiltersFeature'
]);
还是相同的错 是不是我引用的不对啊 高手

哥们你没有导入命名空间吧，没有导入命名空间Ext 原命名空间中就没有Ext.ux 这个包
3 楼 苦逼烟酒生 2012-11-21  
我用的是MVC架构在GRIDPANEL中加了 Ext.require([ 
    'Ext.ux.grid.FiltersFeature'
]);
还是相同的错 是不是我引用的不对啊 高手
2 楼 zha_zi 2012-11-21  
苦逼烟酒生 写道
我照着你的例子运行完后 会报错：....feature/filter.js 404 NOT found 请问是哪里出了问题

在演示包中找examples\ux 下东西然后倒入你项目然后引用，这是一个插件
1 楼 苦逼烟酒生 2012-11-21  
我照着你的例子运行完后 会报错：....feature/filter.js 404 NOT found 请问是哪里出了问题
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics