扩展组件：GroupingView + PropertyGrid = ? （蒙牛版）

原来：

       牛奶 + 豆浆 = 豆奶

       牛奶 + 三聚氰胺 = 蒙牛牛奶 (附：蒙牛的广告语“每一天，为明天”)

 

那么：

       GroupingView + PropertyGrid = ?  思考...

 

答案：

       GroupingView + PropertyGrid  = GroupPropertyGrid

 

----------------------------------------------------------------------------------------------------------------------------------

 

     前几天在使用"PropertyGrid"，但这个属性编辑器不能像"GroupingView"那样分组显示Grid。我们都使用过类似VB或者C#那样的IDE编辑器，里面的属性窗口都是可以分组显示的，在ExtJS的Forum中找了找，发现没有，恩，所以用了一天的时间扩展了PropertyGrid组件，让其支持store和view属性，扩展后的组件如下图：

 

 

扩展后的PropertyGrid能接收store数据源而不用非得传递source了。而PropertyGrid与EditGridPanel不同之处是有单元格编辑器，而不是列编辑器。

 

调用组件的例子：(我使用的是本地数据的Store)

 

	var store = new Ext.grid.GroupPropertyStore({
		autoLoad: true,
        reader: reader,
        data: propertiesArray,
        sortInfo: {field: 'sort', direction: "ASC"},
        groupField: 'groupId'
    });

	var grid = new Ext.grid.GroupPropertyGrid({
		store: store,
		view: new Ext.grid.GroupingView({
			forceFit:true,
			showGroupName: false,
			groupTextTpl: '{group} ({[values.rs.length]} 项)'
		}),
	    customEditors: customEditors,
        border:false,
        width: 700,
        height: 450,
        collapsible: true,
        animCollapse: false,
        iconCls: 'icon-grid',
        el: 'properties-el'
    });

 

源码在文章结尾处提供下载，可能会存在一些问题，待以后fix吧。

 

对于扩展Ext的组件主要是对于Ext.extend(),Ext.apply()及父类构造函数的使用，ExtJS开源社区中有比较好的入门文章，所以俺在这里也就不再鳌述。

 

扩展Ext组件

http://extjs.com/learn/Manual:Component:Extending_Ext_Components

 

Ext2的类扩展

http://extjs.com/learn/Tutorial:Extending_Ext2_Class

 

继承的使用

http://extjs.com/learn/Manual:Intro:Inheritance