ExtJs扩展之GroupPropertyGrid代码


Posted in Javascript onMarch 05, 2010

ExtJs本身就提供了丰富的空间和良好的界面开发,就如同WinForm的开发一样。但是ExtJs的空间也有不完美的地方,但是有缺点也有他自己的弥补方法。ExtJs的良好的扩展性就是ExtJs自己控件不能实现的最好的方法。
这几个中使用最多的当属ExtJs的PropertyGrid,ExtJs的PropertyGrid使用起来时相当简单的,在ExtJs的官方网站上也有相应的例子,简单的就不在叙述了。但是ExtJs本身的PropertyGrid不能支持分组,在显示的不能将属性进行分组,这是相当郁闷的。不知道为什么ExtJs不提供这样的方法和接口。
于是在网上Google了许久,网上也有类似的内容,叫做《扩展组件:GroupingView+ PropertyGrid (蒙牛版)》。楼主写的很好,但是不知道为什么没有将源码贴上。网上也没有其他的好的建议。无奈中,只能自己花点时间去写个吧。于是打开了ExtJs的源代码,找到了PropertyGrid的源文件,一看,还是比较简单的,
其中几个主要内容就是:
PropertyRecord
PropertyStore
PropertyColumnModel
PropertyGrid
于是拷贝了全部的源代码,创建了文件名为Ext.ux.grid.GroupPropertyGrid.js的脚本文件,并测试值,成功通过,开始阅读PropertyGrid的源代码,发现了以下几个问题:
1、PropertyRecord这个种的内容太少了,仅有name和value,
2、PropertyStore使用的是Ext.data.Store,而没有使用Ext.data.GroupingStore
3、PropertyStore使用的数据中不支持分组,并且更新的时候没有对分组进行处理
而PropertyGrid确实继承EditorGridPanel,这个本身就是可以支持Group分组的,这样PropertyGrid中就不需要修改了。
下面就对这几个问题进行修改,让他支持分组:
1、修改PropertyRecord,添加Group字段。

Ext.ux.grid.GroupPropertyRecord=Ext.data.Record.create( 
[{name:"name",type:"string"},"value","group"] 
);

2、修改PropertyStore以支持GroupingStore

Ext.ux.grid.GroupPropertyStore = function(grid, source){ 
this.grid = grid; 
this.store = new Ext.data.GroupingStore({ 
recordType : Ext.ux.grid.GroupPropertyRecord, 
groupField : "group" 
}); 
this.store.on('update', this.onUpdate, this); 
if(source){ 
this.setSource(source); 
} 
Ext.ux.grid.GroupPropertyStore.superclass.constructor.call(this); 
}; 
Ext.extend(Ext.ux.grid.GroupPropertyStore, Ext.util.Observable, { 
setSource : function(o){ 
this.source = o; 
this.store.removeAll(); 
var data = []; 
for(var k in o){ 
if(this.isEditableValue(o[k])){ 
data.push(new Ext.ux.grid.GroupPropertyRecord({name: k, value: o[k],group:k},k)); 
} 
else if(typeof(o[k]) == 'object'){ 
for(var n in o[k]){ 
data.push(new Ext.ux.grid.GroupPropertyRecord({name: n, value: o[k][n],group:k},k+"&&"+n)); 
} 
} 
} 
this.store.loadRecords({records: data}, {}, true); 
}, // private 
onUpdate : function(ds, record, type){ 
if(type == Ext.data.Record.EDIT){ 
var v = record.data['value']; 
var oldValue = record.modified['value']; 
if(this.grid.fireEvent('beforepropertychange', this.source, record.id, v, oldValue) !== false){ 
if(record.id.indexOf("&&")!=-1) 
{ 
var values = record.id.split("&&"); 
this.source[values[0]][values[1]] = v; 
} 
else 
{ 
this.source[record.id] = v; 
} 
record.commit(); 
this.grid.fireEvent('propertychange', this.source, record.id, v, oldValue); 
}else{ 
record.reject(); 
} 
} 
}, 
// private 
getProperty : function(row){ 
return this.store.getAt(row); 
}, 
// private 
isEditableValue: function(val){ 
if(Ext.isDate(val)){ 
return true; 
}else if(typeof val == 'object' || typeof val == 'function'){ 
return false; 
} 
return true; 
}, 
// private 
setValue : function(prop, value){ 
this.source[prop] = value; 
this.store.getById(prop).set('value', value); 
}, 
// protected - should only be called by the grid. Use grid.getSource instead. 
getSource : function(){ 
return this.source; 
} 
});

主要修改了SetSource,onUpdate这两个方法,并且修改了Store为GroupingStore。这样在去测试,就成功的可以看到PropertyGrid已经可以分组了。效果图如下:
ExtJs扩展之GroupPropertyGrid代码
这样整个工作就完成了。

全部的源代码下载: http://xiazai.3water.com/201003/yuanma/GroupPropertyGrid.rar

Javascript 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
List the Codec Files on a Computer
Jun 18 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
javascript操作referer详细解析
Mar 10 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
js 获取服务器控件值的代码
Mar 05 #Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 #Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 #Javascript
ExtJS 工具栏 分页事件参数
Mar 05 #Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 #Javascript
javascript 浏览器检测代码精简版
Mar 04 #Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 #Javascript
You might like
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
php 分页原理详解
2009/08/21 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
详解Python的Django框架中的模版相关知识
2015/07/15 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
python机器学习之神经网络(二)
2017/12/20 Python
Python2包含中文报错的解决方法
2018/07/09 Python
python3中property使用方法详解
2019/04/23 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
Python PIL图片添加字体的例子
2019/08/22 Python
python:动态路由的Flask程序代码
2019/11/22 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
HTML5未来发展趋势
2016/02/01 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
报考公务员诚信承诺书
2014/08/29 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书