- 浏览: 592596 次
- 性别:
- 来自: 西安
文章分类
最新评论
-
青春依旧:
html5教学哪家强!当然要上华清远见!
深入理解浏览器兼容性模式 -
ashur:
真机智,看得我都笑自己了
js 字符串转dom 和dom 转字符串 -
panghaoyu:
实现一个智能提示功能需要ajax、数据库、jsp/php、算法 ...
solr第一弹 autocomplete(自动补全) -
FakLove:
连线如何删除啊
基于html5 的拖拽连线 -
FakLove:
连线可以再删除吗?
基于html5 的拖拽连线
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); } });
效果如下
评论
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的啊。。。这蛋疼的
但是测试了一下remote的方式,又根本不能过滤~求解~
官方的例子里也只写了local的啊。。。这蛋疼的
稍微改造一下就行了
您好,请问 这个问题如何改造呢?
刚才我试了一下local:false 这个就可以直接调用remote 数据,不用搞这么麻烦,我用的是4.0.7版本,真不行就用我说的这种稍微麻烦一点的我已经试过也是可以的也很简单
14 楼
zha_zi
2013-10-30
iiwahaha 写道
zha_zi 写道
云亦飞 写道
测试了一下,只能过滤出当前页下的数据。
但是测试了一下remote的方式,又根本不能过滤~求解~
官方的例子里也只写了local的啊。。。这蛋疼的
但是测试了一下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 即可,
/**
* @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的啊。。。这蛋疼的
但是测试了一下remote的方式,又根本不能过滤~求解~
官方的例子里也只写了local的啊。。。这蛋疼的
稍微改造一下就行了
您好,请问 这个问题如何改造呢?
11 楼
zha_zi
2013-01-08
云亦飞 写道
测试了一下,只能过滤出当前页下的数据。
但是测试了一下remote的方式,又根本不能过滤~求解~
官方的例子里也只写了local的啊。。。这蛋疼的
但是测试了一下remote的方式,又根本不能过滤~求解~
官方的例子里也只写了local的啊。。。这蛋疼的
稍微改造一下就行了
10 楼
云亦飞
2013-01-06
测试了一下,只能过滤出当前页下的数据。
但是测试了一下remote的方式,又根本不能过滤~求解~
官方的例子里也只写了local的啊。。。这蛋疼的
但是测试了一下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.ux.grid.FiltersFeature'
]);
还是相同的错 是不是我引用的不对啊 高手
哥们你没有导入命名空间吧,没有导入命名空间Ext 原命名空间中就没有Ext.ux 这个包
3 楼
苦逼烟酒生
2012-11-21
我用的是MVC架构在GRIDPANEL中加了 Ext.require([
'Ext.ux.grid.FiltersFeature'
]);
还是相同的错 是不是我引用的不对啊 高手
'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 请问是哪里出了问题
发表评论
-
浏览器事件是冒泡还是捕获
2016-07-27 16:37 3020这是三种事件处理的模型 (1)冒泡型事件:事件按照从最特定 ... -
javascript 编程反思1 new 原理
2016-04-27 14:05 0我们在定义对象的时候通常使用两种方式 1:通过new 关键 ... -
javascript 设计模式1 单例模式
2015-06-15 15:10 0... -
facebook html5开发app 失败的原因,
2015-06-08 11:56 1956Here’s why the Facebook iOS a ... -
jQuery zepto 用法区别
2015-05-22 11:50 0以前都是用jQuery 因为移动项目中在使用zepto 基本 ... -
js 加载机制和defer async用法
2015-05-15 17:45 0这是今天我一个 ... -
grunt 不是内部命令
2015-05-04 19:21 1458grunt 不是内部命令!! ... -
你不知道的URL中#井号用法
2015-02-10 12:36 7079URL 中 # 井号的用法 ... -
JS 伪数组原理详解
2014-12-01 11:24 2487jav ... -
jquery 滚动条插件nanoScroller 的用法
2014-11-27 11:17 5699scroller 插件nanoSc ... -
h5,hybrid 开发中问题汇总
2014-10-17 11:26 8205H5开发问题总结 和jqu ... -
backbone中的 reuter 和histroy
2014-10-13 10:45 624Router和History (路由控制) Back ... -
animate 技术分析 raphael
2014-07-28 16:40 0Animate 什么是animate,一般我 ... -
Raphaeljs 插件实现任意SVG节点加载
2014-07-14 09:26 8623SVG 和Raphael http://rap ... -
ECMAScript 5
2014-07-08 14:36 1056新版本在给基本库带来 ... -
jQueryUI Widget 代码详解
2014-07-07 12:20 0为什么需要研究JqueryUI 中Widget 的代码 ... -
typescript 用法介绍
2014-07-01 09:58 1237前言 Typescript的形態 如何定義va ... -
window.eval 与eval 区别
2014-06-27 10:57 1083它们之间有区别吗? 开发过程中似乎很少有人去加个额外的win ... -
jQuery 学习分析系列1 jQuery是个什么东西
2014-06-23 10:06 0jQuery 的基本结构 过去使用jQuery ... -
Sizzle 引擎--原理与实践3
2014-06-18 14:05 787Sizzle引擎--原理与实践(三) 查找的入口对 ...
相关推荐
这篇博客“ExtJS4.0 分享GridHeaderFilters插件”可能详细介绍了如何集成并使用这个插件。虽然具体内容无法直接获取,但我们可以根据常规实践来探讨这个插件的一些关键知识点。 1. **安装与引入**: 在使用Grid...
9. **插件**:EXTJS Grid可以集成多种插件,如`RowExpander`用于展开行显示更多详情,`CellSelectionModel`用于选择单个单元格等。 10. **异步加载**:配合`Store`的异步加载机制,Grid可以在需要时动态加载数据,...
ExtJS Grid是Sencha ExtJS框架中的一个核心组件,它用于构建数据驱动的表格视图。Grid组件在Web应用中广泛使用,因为它提供了强大的数据展示、排序、分页、筛选和编辑功能。以下是对`ExtJS Grid`示例代码的详细解析...
同时,可以使用`CellEditing`插件来提供更友好的用户界面。当用户在某个单元格上双击时,会触发编辑模式,编辑完成后保存更改。 3. **删除数据**: 删除数据通常是通过选择特定行,然后调用`store.remove()`方法来...
- 表格过滤:使用`Ext.grid.feature.Filter`特性实现列过滤,让用户自定义筛选条件。 总结来说,理解和掌握动态菜单和表格数据展示在ExtJS4.2中的操作,对于开发高效、灵活的Web应用程序至关重要。这些组件和功能...
"ExtjsGrid Demo"是一个示例项目,旨在展示如何在实际应用中使用ExtJS Grid。 在ExtJS Grid中,我们可以配置以下关键组件和功能: 1. **数据源**:Grid的数据通常来自Store对象,它可以连接到各种数据源,如本地...
这通常通过使用`Ext.grid.plugin.CellEditing`插件实现,该插件允许在单击单元格时激活编辑模式。 9. **MHT文件** `extJs 常用到的增,删,改,查操作代码_extjs_脚本之家.mht`是一个单一网页档案(MHT)文件,...
7. **行编辑(Row Editing)**:为了实现用户列表的直接编辑,可以使用`Ext.grid.plugin.RowEditing`插件。点击行时激活编辑模式,编辑完成后自动提交到Store,Store再通过Proxy更新服务器。 8. **分页(Paging)**...
【EXTJS 2.02 GridPanel 知识详解】 EXTJS GridPanel 是EXTJS库中的核心组件之一,尤其在EXTJS 2.02版本中,它...对于开发者而言,掌握EXTJS GridPanel的使用,不仅可以提高开发效率,还能为用户提供优秀的用户体验。
在ExtJS4中,动态生成的grid导出为Excel是一个常见的需求,这通常涉及到使用一些扩展库来实现。本文将详细介绍如何解决这个问题,包括解决表格重复下载的BUG和初始化时遇到的问题。 首先,我们需要理解ExtJS4的grid...
在本文中,我们将深入探讨如何使用ExtJS框架实现EditGrid中的增删改查操作。ExtJS是一个强大的JavaScript库,主要用于构建富客户端Web应用程序。EditGrid是ExtJS中用于展示和编辑表格数据的一种组件,它提供了丰富的...
在本文中,我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例,以及与其相关的源码和工具。 首先,让我们理解GridPanel的基本结构。GridPanel通常由以下几个主要部分组成: 1. **Store**: 存储数据的...
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"是一个基于ExtJS 5.1版本的示例,展示了如何使用ExtJS来创建和操作数据网格,即Grid组件。 在ExtJS中,Grid是用于展示大量结构化数据的关键组件。它允许用户对数据进行排序、分页、筛选、编辑等多种...
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"旨在教授如何在EXTJS中创建并使用GridPanel。 GridPanel是EXTJS中的一个核心组件,它允许开发者以网格形式展示数据,支持多种功能,如排序、分页、筛选、编辑等。在EXTJS中,...
使用`store.load()`方法加载数据,配合`store.filter()`或`grid.getView().refresh()`实现查询。 #### 表格的单击事件 监听`itemclick`事件,可以获取到点击行的数据和索引。 #### 包装表格中的某列 可以使用`...
在"表格可编辑"的场景中,我们可以使用`Ext.grid.plugin.CellEditing`插件来实现单元格级别的编辑功能。当用户点击某个单元格时,编辑框会自动出现,让用户可以直接修改数据,然后提交到服务器进行更新。这极大提升...