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