当前位置: 代码迷 >> 综合 >> 扩展组件:GroupingView + PropertyGrid = ? (蒙牛版)
  详细解决方案

扩展组件:GroupingView + PropertyGrid = ? (蒙牛版)

热度:24   发布时间:2024-01-19 09:57:19.0

原来:

       牛奶 + 豆浆 = 豆奶

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

 

那么:

       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