ExtJs扩展之GroupPropertyGrid

ExtJs扩展之GroupPropertyGrid2010-11-16 博客园萧萧空间这几天做一个Web项目，使用了ExtJs，其中有个像设计器一样的界面，选择界面上的内容，可以直接编辑内容的属性，这个原本来说对于使用ExtJs还是很简单的。ExtJs本身就提供了丰富的空间和良好的界面开发，就如同 WinForm的开发一样。但是的空间也有不完美的地方，但是有缺点也有他自己的弥补方法。ExtJs的良好的扩展性就是ExtJs自己控件不能实现的最好的方法。

这几个中使用最多的当属ExtJs的PropertyGrid，ExtJs的PropertyGrid使用起来时相当简单的，在ExtJs的官方网站上也有相应的例子，简单的就不在叙述了。但是ExtJs本身的PropertyGrid不能支持分组，在显示的不能将属性进行分组，这是相当郁闷的。不知道为什么ExtJs不提供这样的方法和接口。

于是在网上Google了许久，网上也有类似的内容，叫做《扩展组件：GroupingView+ PropertyGrid （蒙牛版）》。楼主写的很好，但是不知道为什么没有将源码贴上。网上也没有其他的好的建议。无奈中，只能自己花点时间去写个吧。于是打开了ExtJs的源代码，找到了PropertyGrid的源文件，一看，还是比较简单的，

其中几个主要内容就是：

PropertyRecord

PropertyStore

PropertyColumnModel

PropertyGrid

于是拷贝了全部的源代码，创建了文件名为Ext.ux.grid.GroupPropertyGrid.js的脚本文件，并测试值，成功通过，开始阅读PropertyGrid的源代码，发现了以下几个问题：

1、PropertyRecord这个种的内容太少了，仅有name和value，

2、PropertyStore使用的是Ext.data.Store，而没有使用Ext.data.GroupingStore

3、PropertyStore使用的数据中不支持分组，并且更新的时候没有对分组进行处理

而PropertyGrid确实继承EditorGridPanel，这个本身就是可以支持Group分组的，这样PropertyGrid中就不需要修改了。

下面就对这几个问题进行修改，让他支持分组：

1、修改PropertyRecord,添加Group字段。

1 Ext.ux.grid.GroupPropertyRecord=Ext.data.Record.create（
2     [{name:"name",type:"string"},"value","group"]
3 ）;