`
zha_zi
  • 浏览: 592596 次
  • 性别: 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
分享到:
评论
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 请问是哪里出了问题

相关推荐

    ExtJS4.0 分享GridHeaderFilters插件

    这篇博客“ExtJS4.0 分享GridHeaderFilters插件”可能详细介绍了如何集成并使用这个插件。虽然具体内容无法直接获取,但我们可以根据常规实践来探讨这个插件的一些关键知识点。 1. **安装与引入**: 在使用Grid...

    extjs grid

    9. **插件**:EXTJS Grid可以集成多种插件,如`RowExpander`用于展开行显示更多详情,`CellSelectionModel`用于选择单个单元格等。 10. **异步加载**:配合`Store`的异步加载机制,Grid可以在需要时动态加载数据,...

    extjs grid示例代码

    ExtJS Grid是Sencha ExtJS框架中的一个核心组件,它用于构建数据驱动的表格视图。Grid组件在Web应用中广泛使用,因为它提供了强大的数据展示、排序、分页、筛选和编辑功能。以下是对`ExtJS Grid`示例代码的详细解析...

    extjs4.0 grid

    同时,可以使用`CellEditing`插件来提供更友好的用户界面。当用户在某个单元格上双击时,会触发编辑模式,编辑完成后保存更改。 3. **删除数据**: 删除数据通常是通过选择特定行,然后调用`store.remove()`方法来...

    ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇

    - 表格过滤:使用`Ext.grid.feature.Filter`特性实现列过滤,让用户自定义筛选条件。 总结来说,理解和掌握动态菜单和表格数据展示在ExtJS4.2中的操作,对于开发高效、灵活的Web应用程序至关重要。这些组件和功能...

    ExtjsGrid Demo

    "ExtjsGrid Demo"是一个示例项目,旨在展示如何在实际应用中使用ExtJS Grid。 在ExtJS Grid中,我们可以配置以下关键组件和功能: 1. **数据源**:Grid的数据通常来自Store对象,它可以连接到各种数据源,如本地...

    Extjs 表格

    这通常通过使用`Ext.grid.plugin.CellEditing`插件实现,该插件允许在单击单元格时激活编辑模式。 9. **MHT文件** `extJs 常用到的增,删,改,查操作代码_extjs_脚本之家.mht`是一个单一网页档案(MHT)文件,...

    extjs完成用户增删改查

    7. **行编辑(Row Editing)**:为了实现用户列表的直接编辑,可以使用`Ext.grid.plugin.RowEditing`插件。点击行时激活编辑模式,编辑完成后自动提交到Store,Store再通过Proxy更新服务器。 8. **分页(Paging)**...

    Extjs2.02 Gridpanel

    【EXTJS 2.02 GridPanel 知识详解】 EXTJS GridPanel 是EXTJS库中的核心组件之一,尤其在EXTJS 2.02版本中,它...对于开发者而言,掌握EXTJS GridPanel的使用,不仅可以提高开发效率,还能为用户提供优秀的用户体验。

    ExtJS4 动态生成的grid导出为excel示例

    在ExtJS4中,动态生成的grid导出为Excel是一个常见的需求,这通常涉及到使用一些扩展库来实现。本文将详细介绍如何解决这个问题,包括解决表格重复下载的BUG和初始化时遇到的问题。 首先,我们需要理解ExtJS4的grid...

    ExtJs实现EditGrid中的增删改查操作(2)

    在本文中,我们将深入探讨如何使用ExtJS框架实现EditGrid中的增删改查操作。ExtJS是一个强大的JavaScript库,主要用于构建富客户端Web应用程序。EditGrid是ExtJS中用于展示和编辑表格数据的一种组件,它提供了丰富的...

    ExtJS 表格面板GridPanel完整例子

    在本文中,我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例,以及与其相关的源码和工具。 首先,让我们理解GridPanel的基本结构。GridPanel通常由以下几个主要部分组成: 1. **Store**: 存储数据的...

    ExtJSWeb应用程序开发指南(第2版)

    2.4.1 开发插件spket 2.4.2 FullSource 2.4.3 MicrosoftScriptDebugger 2.5 ExtJS对原有JavaScript对象的扩展 2.5.1 Ext.Array 2.5.2 Ext.Date 2.5.3 Ext.Function 2.5.4 Ext.Number 2.5.5 Ext.String ...

    ExtGridDemo

    "ExtGridDemo"是一个基于ExtJS 5.1版本的示例,展示了如何使用ExtJS来创建和操作数据网格,即Grid组件。 在ExtJS中,Grid是用于展示大量结构化数据的关键组件。它允许用户对数据进行排序、分页、筛选、编辑等多种...

    Ext Js权威指南(.zip.001

    1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用json / 8 1.2.6 在java中使用json / 12 1.2.7 更多有关json的信息 / 15 1.3 ext js 4概述 / 15 1.4 ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1...

    EXTJSEXT实例GridPanel.

    这个实例"EXTJSEXT实例GridPanel"旨在教授如何在EXTJS中创建并使用GridPanel。 GridPanel是EXTJS中的一个核心组件,它允许开发者以网格形式展示数据,支持多种功能,如排序、分页、筛选、编辑等。在EXTJS中,...

    Ext常用功能开发总结

    使用`store.load()`方法加载数据,配合`store.filter()`或`grid.getView().refresh()`实现查询。 #### 表格的单击事件 监听`itemclick`事件,可以获取到点击行的数据和索引。 #### 包装表格中的某列 可以使用`...

    Ext JS的table设计实例

    在"表格可编辑"的场景中,我们可以使用`Ext.grid.plugin.CellEditing`插件来实现单元格级别的编辑功能。当用户点击某个单元格时,编辑框会自动出现,让用户可以直接修改数据,然后提交到服务器进行更新。这极大提升...

Global site tag (gtag.js) - Google Analytics