ExtJs扩展之GroupPropertyGrid代码

ExtJs本身提供了丰富的空间和良好的接口开发，就像WinForm的开发一样。然而，ExtJs的空间并不完美，但它有自己的补救方法。ExtJs良好的可扩展性是ExtJs靠自己的控制无法实现的最好方式。其中使用最多的是ExtJs的PropertyGrid，使用起来相当简单，在ExtJs的官网上也有相应的例子，简单性就不描述了。但是ExtJs自带的PropertyGrid不支持分组，显示的属性不能分组，相当压抑。不知道为什么ExtJs不提供这样的方法和接口。所以我在网上谷歌了很久，网上有一个类似的内容叫《扩展组件：GroupingView+ PropertyGrid （蒙牛版）》。楼主写的很好，但是不知道为什么源代码没有贴出来。网上没有其他好的建议。无奈之下，只能花点时间自己写一篇。然后打开ExtJs的源代码，找到了PropertyGrid的源文件，乍一看还是比较简单的。几个主要内容如下：property record property store property column model property grid然后复制了所有的源代码。创建了一个名为ext . UX . grid . GroupPropertyGrid . js的脚本文件，并对该值进行了测试，测试成功。在阅读propertygrid的源代码后，发现了以下问题：1 .PropertyRecord的内容太少，只有名称和值。2.PropertyStore使用Ext.data.Store，但不使用ext . data . groupingstore . 3 . property store使用的数据不支持分组，更新时不处理分组，PropertyGrid确实继承了EditorGridPanel，本身就可以支持分组，所以不需要在PropertyGrid中修改。让我们修改这些问题以支持分组：1。修改属性记录并添加组字段。

复制代码代码如下：分机。UX。网格。组属性记录=ext。数据。记录。create([{ name : ' name '，type:'string'}，' value '，' group '])；2、修改PropertyStore以支持GroupingStore复制代码代码如下：分机。UX。网格。GroupPropertyStore=函数(网格，源){ this。网格=网格；这个。商店=新Ext。数据。GroupingStore({ RecordType : Ext。UX。网格。GroupPropertyRecord，GroupField : ' group ' })；this.store.on('update '，this.onUpdate，this)；if(source){ this。setsource(源)；}分机。UX。网格。GroupPropertyStore。超级班级。构造函数。叫(这个)；};延伸文件系统扩展(外部。UX。网格。组属性存储，外部。乌提尔。天文台，{ SetSource : function(o){ this。source=o；这个。商店。remove all()；定义变量数据=[];for(var k in o){ if(this。iseditablevalue(o[k]){ data。推送(新的Ext。UX。网格。Groupproperty记录({ name :k，value: o[k]，group:k}，k))；} else if(o[k])的类型==' object '){ for(o[k]中的var n){ data。推送(新的Ext。UX。网格。group property record({ name :n，value: o[k][n]，group:k}，k ' ' n))；} } }这个。商店。加载记录({ records 3360 data }，{}，true)；}，//private onUpdate :函数(ds，record，type){ if(type==ext。数据。记录。编辑){ var v=记录。数据[' value ']；var旧值=记录。已修改[' value ']；如果(这个。网格。FireEvent('在属性更改之前'，this.source，record.id，v，oldValue)！==false){ if(record.id.indexOf(' ')！=-1){ var值=记录。身份证。split(')；这个。source[values[0]][values[1]]=v；} else { this。来源[记录。id]=v；}记录。commit()；这个。网格。FireEvent('属性更改'，this.source，record.id，v，旧值)；} else { record。reject()；} } }，//private getProperty :函数（行){ return this.store.getAt(行);}，//private isEditableValue:函数(val){ if(Ext。IsDate(val)){ return true；} else if(val==' object '的类型| | val==' function '的类型){ return false}返回true}，//private setValue :函数(道具，价值){这个。source[prop]=值；this.store.getById(道具)。set('value '，value)；}、//受保护-应该只由网格调用。请改用grid.getSource .getSource :函数(){ return this . source } })；主要修改了设置源，更新这两个方法，并且修改了商店为群组存储。这样在去测试，就成功的可以看到属性表格控件已经可以分组了。效果图如下

这样整个工作就完成了。所有源代码下载：http://xiazai.jb51.net/201003/yuanma/GroupPropertyGrid.rar.