EXTJS表格功能扩展

        Extjs的表格功能是很强大的，能够实现相关复杂的功能，只要你去挖掘，总会有新的发现。本文所使用的EXTJS是基于4.2.2版本的，由于EXTJS5变化较大，暂时没有去研究。以下主要列举我开发得比较成熟的控件

注：本文只针对EXTJS有一定经验的开发人员，源码暂未放上来，看看大家是否感兴趣。。。

1、有状态表格--StatefulGrid

        每个用户可以选择表格要显示的列、列的顺序及行排序规则。这些规则都会被服务存储，下用户再使用同一表格时，会按之前配置的规则显示。其实EXTJS已经有控件状态记忆功能，对于表格的列已经提供了stateful、stateId属性。虽然机制是有的，但是用起来很不方便，为此我开发了StatefulGrid，用来支持保存表格布局、重置表格布局。如下图：



2、可编辑表格--EditableGrid

Extjs的表格本身已经支持编辑，也支持TAB键进行跳转，再是对于大部份企业人员来说，更想要的是通过回车键来完成编辑，通过上下左右键来来实现表格焦点跳转。为了让回车键、上下左右键同TAB键的效果一样，我也对表格进行了改造。

3、表格行编辑--RowEditor

Extjs本身也有行编辑的控制，但是这个控件存在不足，当表格列比较多时，自带的行编辑根本难以使用，且TAB健的焦点跳转也存在问题。为此我开发了ExpandRowEditor，可以方便地将编辑区控制在可视范围内，效果如下：



4、跨页选择处理--StatefulCheckboxModel

Extjs本身对表格已要有CheckBoxModel模式支持，但是这种支持很显然不能满足需求，因为对操作人员来讲，往往需要跨页来勾选。也就是说在第一页勾选记录后，点下一页再勾选几条，最终的处理是要对第一页和第二页所选的记录都进行处理。为此我也对CheckboxModel进行了改造，当点击表头的全选意味着每一页都全选，此外每一页的勾选都会被记忆，最终的操作都是针对所有勾选记录执行，效果如下：



5、MemoryProxy支持分页显示

Extjs本身提供了页面缓存机制，也就是说把表格所有的记录都存储在浏览端，Extjs默认只能把所有的这些记录都显示在表格里，对于小数据量来说没什么大碍，但是当表格的数据量超过500后，这种方式我是坚决不赞同的，数据量大太会导致界面“卡”，影响界面性能。为了优化，我对Memory实现了分页查询，Grid每次只显示Memory中的一页数据。当然这并不能真正地解决性能问题，要有更好的体验，就要使用store
proxy。

6、缓存式表格--BufferStore

Grid本身的store已经提供了proxy机制，这个proxy有着非常强大的用途：对表格数据进行服务缓存。对于包含上千条数据的表格，我选择把这些数据存放在数据库缓存表中，前台界面通过proxy读取缓存表的数据并进行增删改。最终保存时，再把缓存表的数据存入正式表中。这种机制对于大数据量的显示非常有用。