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 相关文章推荐
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
动态规划之使用备忘录来改进Javascript函数
Apr 07 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
PHP中ADODB类详解
2008/03/25 PHP
抓取YAHOO股票报价的类
2009/05/15 PHP
php && 逻辑与运算符使用说明
2010/03/04 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
js实现简单的验证码
2015/12/25 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
Python实现图片转字符画的示例代码
2017/08/21 Python
python先序遍历二叉树问题
2017/11/10 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
世界上最大的二手相机店:KEN
2017/05/17 全球购物
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
厂长岗位职责
2014/02/19 职场文书
团日活动总结怎么写
2014/06/25 职场文书
个人廉政承诺书
2015/04/28 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技