原来:
牛奶 + 豆浆 = 豆奶
牛奶 + 三聚氰胺 = 蒙牛牛奶 (附:蒙牛的广告语“每一天,为明天”)
那么:
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