我们知道Ext的表格功能是很强大的,但有时仍然满足不了我们的需求。比如有时我们需要将表格的列锁定,类似Excel冻结列的功能。再比如有时我们希望在表格底部显示一行合计。
Ext的示例中带有这种锁定的扩展,如果只需要锁定列,依照这个示例就可以满足我们的要求。而且Ext的示例中也带有分组合计的功能,如果需要分组合计也正好可以满足。但是,这个分组合计的功能却不能进行整表的合计,而且分组的列必须包含在表格中,虽然可以被隐藏但分组前总是带有一个加号,用来展开和收起分组。显然这个用来做整表的合计是不合适的。并且这个分组合计插件与锁定列的扩展是不能同时使用的,由于他们都操作表格的view所以是冲突的。
在网上看到一篇文章,有人做了一个表格合计的功能,但是不巧的是他把合计的行放在了表格的顶端,这不符合我们的习惯。而且他的这个扩展也是与锁定列插件冲突的。于是只好自己写一个。
废话不多说了,先看一下效,然后上代码。
JS代码放在附件中,包含4个文件,其中两个是演示代码。另外GridSummary.js是扩展的合计行插件,LockingGridView_fixed.js是为了解决锁定列功能与合计共同使用时产生的冲突问题的。
锁定列与合计行功能可以分开使用也可以一起使用。使用锁定列功能时,表格必须使用锁定列专用的ColumnModel:Ext.ux.grid.LockingColumnModel ,并且要配合专用的view : new Ext.ux.grid.LockingGridView()。
使用合计行功能只需要使用一个grid插件plugins : new Ext.ux.grid.GridSummary()。
此功能是基于Ext3.3.1扩展的,用法就是这样的,具体的情况请看附件中的demo吧(放到Ext文件加内就可运行预览了)。估计还有很多人想要使用这样的功能,特此贡献出来,祝大家使用愉快。
此文章由作者转发,要下载附件或与作者交流,请到原文地址:http://www.oecp.cn/hi/slx/blog/1168162,谢谢。
分享到:
相关推荐
用于Ext开发Grid中遇到的所锁列的问题,这个很有帮助
Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分...
本示例实现Ext2.0的 Grid列锁定,用到了扩展类,代码为C# MVC。下载代码便可以运行查看效果,可以根据需要配置你自己实际的需要。
extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列锁 ajax远程支持 table转换 等功能">http: www extgrid com extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui ...
网上收集的比较好的ext 多表头和锁定列结合的示例。 解压可以直接看到效果。
Ext3.4 将BufferView添加到LockingGridView中, 修改GroupHeaderPlugin使其可用于LockingGridView 内有使用示例
Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码
支持Ext3 Ext4导出excel,客户端导出表格,支持各种主流浏览器。
EXT GRID使用EXT GRID使用 EXT GRID使用EXT GRID使用
EXT中根据返回的grid中的状态列的内容来改变这一行显示的背景颜色
Ext grid panel 滚动条位置不变,适用于实时数据的刷新
本实例使用官方Ext3.1包 ...1.创建简单快捷的Ext Grid控件 代码清晰 2.Grid 读取 Xml 3.Grid 读取 json 4.Grid 读取 Excel 5.直接在 Grid 控件进行增删改查的操作 有任何疑问的同志欢迎提出即可谢谢
在Ext的grid里实现带radio单选功能的gridlist
一个完整的ext中grid与tree的使用,是很好的一个学习例子.
Ext3.4.0复杂(多行)表头+锁定多列例子 非常棒,项目中需要使用到的。
官方例子 Ext grid filter
NULL 博文链接:https://damen.iteye.com/blog/946039
Ext Grid表格的自动宽度及高度的实现