扩展组件：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

 

 

评论

20 楼 zongpo 2009-11-18  

请发给我一份吧！多谢！
[e-mail]

19 楼 310963321 2009-11-16  

Nice work, 正好需要这样的东东，研究下！麻烦发下啊：[e-mail]

18 楼 Xsword_cn 2009-10-09  

不错
代码能发给我吗？[e-mail]

17 楼 lkocok 2009-09-10  

很不错嘛！正想参考一下
[e-mail]
谢谢！

16 楼 atian25 2009-09-01  

话说,官方的EXTJS DESIGNER 3.0 IDE preview的源码里面也有个类似的.
不知道啥时能成为ux,或者转正

15 楼 popmonkey 2009-09-01  

正在做一个图列的标记功能;
正好需要一个这样的扩展.
楼主可否共享代码来引个路
[e-mail]

14 楼 li6151770 2009-08-13  

[e-mail]     Thanks in advance!

13 楼 wukong 2009-08-12  

非常感谢，发一份给我
[e-mail]

12 楼 Seraph115 2009-08-11  

谢谢，它是支持Store的，我也在使用 

如下：
图示ExtJS商业智能的仪表盘配置系统 - (Season 1)
http://seraph115.iteye.com/blog/438527

11 楼 让你笑了 2009-08-11  

很帅,也很实用...

支持STORE了么...

也发我一份吧...

[e-mail]

谢谢!

10 楼 会飞的狗 2009-08-09  

很不错。我去看看

9 楼 kimmking 2009-08-05  

[e-mail]

投了个票

8 楼 Seraph115 2009-08-05  

恩，所以在扩展中已经替换成支持store的了，原来的source形式也是可以理解的

7 楼 atian25 2009-08-05  

我觉得PropertyGrid这个类本身封装的不好,不喜欢它的source的形式



btw:

wxiaoming 写道

呵呵 忘记加email了 [e-mail] 谢谢

赶紧删除你的回帖吧.

我刚被fk了... 楼主害人啊...

ps: 我没收到mail.

自己也写了个,呵呵

6 楼 Seraph115 2009-08-05  

wxiaoming 写道

呵呵 忘记加email了 [e-mail] 谢谢

Check your mail.Already send it to u.

5 楼 wxiaoming 2009-08-05  

呵呵 忘记加email了 [e-mail] 谢谢

4 楼 wxiaoming 2009-08-05  

刚看到你的bi系统 呵呵 很有启发，不知道能否共享下你的propertygrid扩展啊？感激不尽

3 楼 Seraph115 2009-08-05  

atian25 写道

thanks,
[e-mail]

Send it for u and hbing

2 楼 atian25 2009-08-05  

thanks,
[e-mail]

1 楼 atian25 2009-08-05  

well done

but 附件?