- 浏览: 235825 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
月度银墙:
wangxiang243 写道不错 !但是ext4中六月和十二 ...
ext2,3,和4 版本 只显示年月的日期插件 -
38123978:
你好,我最近在看cassandra的性能,我想问一下5000万 ...
Cassandra学习笔记3 -
zhaojinmeng:
您好楼主,extjs5要怎么扩展啊?求指导
ext2,3,和4 版本 只显示年月的日期插件 -
love_wting:
为什么下拉框的表格样式显示了,数据访问json也从数据库中取到 ...
Extjs 下拉grid -
laungcisin:
yangxiutian 写道另外Ext4.2.1还故意把x-m ...
ext2,3,和4 版本 只显示年月的日期插件
转:(http://www.liyonghome.cn/index.php/archives/187.html )
选择这个控件,是因为在昨天进行的一项开发中,需要一个可编辑的GridPanel控件,另外由于科目一项分为3-4级的树形结构,因此就需要找到一个合适的TreeGridPanel。
在网上查找很久,才发现了在Extjs3.0中,有Ext.ux.maximgb.tg.EditorGridPanel这样一个类提供了对我需求的支持,初步分析一下,依然有这样一些问题。目前本人还在使用这个控件进行开发,如果有什么新的内容会及时更新,欢迎大家通过E-mail和我共同学习。至于我的大多数修改都是通过使用来实现,并未修改源代码,其实诸如禁止指定行编辑,非叶子节点进行统计等,都可以通过修改源代码进行封装实现,但是由于下周就要结束项目开发,时间紧迫,因此没有时间来完善。等项目间歇期有时间了,本人会考虑封装一个新的TreeGrid类来实现以下方法,希望能够和大家讨论。
1.参数_lft和_rgt不知道如何设置,可不可以不用?
其实_lft和_rgt可以不用设置,网上很多代码提供如下样子的实现
var data = [
{"_id":1,"_parent":null,"_level":1,"_lft":1,"_rgt":98,"_is_leaf":false,"item":" 主营业务成本","YN":64.72},
{"_id":2,"_parent":1,"_level":2,"_lft":2,"_rgt":49,"_is_leaf":true,"item":" 网络维护成本","YN":64.72}
];
var record = Ext.data.Record.create([
{name: '_id', type: 'int'},
{name: '_level', type: 'int'},
{name: '_lft', type: 'int'},
{name: '_rgt', type: 'int'},
{name: '_is_leaf', type: 'bool'},
{name: 'item'},
{name: 'benbu', type: 'float'}
]);
var store = new Ext.ux.maximgb.tg.NestedSetStore({
autoLoad : true,
reader: new Ext.data.JsonReader({id: ‘_id’}, record),
proxy: new Ext.data.MemoryProxy(data)
});
在这里为什么需要设置_lft和_rgt,是因为Ext.ux.maximgb.tg.NestedSetStore的需要,可以通过 TreeGrid.js文件的源代码可以分析,在此Store中,树形结构使用的是基于左右值的无限分类算法。但是在我们的使用当中,去为此json对象生成此参数却相当的麻烦,至少自己一下没能找到解决的办法。在研究这段的代码的同时,自己也发现了一个同样继承于 Ext.ux.maximgb.tg.AbstractTreeStore的 Ext.ux.maximgb.tg.AdjacencyListStore,最关键的是,这个类所需要的参数,是我们常见的_parent参数,也就是基于父子关系的树形结构算法。
经过自己测试,可以只需要_parent就可以使用了,如下。
var data = [
{"_id":1,"_parent":null,"_level":1,"_is_leaf":false,"item":"主营业务成本","YN":64.72},
{"_id":2,"_parent":1,"_level":2,"_is_leaf":true,"item":"网络维护成本","YN":64.72}
];
var record = Ext.data.Record.create([
{name: '_id', type: 'int'},
{name: '_level', type: 'int'},
{name: '_is_leaf', type: 'bool'},
{name: 'item'},
{name: 'benbu', type: 'float'}
]);
var store = new Ext.ux.maximgb.tg.AdjacencyListStore({
autoLoad : true,
reader: new Ext.data.JsonReader({id: ‘_id’}, record),
proxy: new Ext.data.MemoryProxy(data)
});
在这里面就没有了_lft和_rgt参数,仅仅更换了一下Store而已。
2.树形结构能不能够默认展开?
通常情况下,大家习惯于在代码的最后调用一个展开方法即可。在源代码中,查到AdjacencyListStore含有一个 expandAll()方法,按照字面意思应该就是展开所有节点的方法。但是在使用当中,却发现没有效果。在expandAll()方法中有这样一个定义:records = this.data.getRange(),records 应该就是此store中的所有数据的集合,得到以后分别遍历进行展开操作,在调试js的时候发现,得到的这个records.length居然等于0,思考一会猜测应该是expandAll()比Store的load()方法优先了,在进行展开操作的时候还并未加载到数据。因此自己放弃了Store中的 autoLoad : true这项配置。手工写了load操作和expandAll操作。
store.load();
store.expandAll();
这样调整以后就可以默认展开了,但是当自己将测试的本地数据换成远程的动态调用时,发现又没有效果了,原因是store.load()是异步操作,由于远程请求较慢,在store.load()操作还并未返回的时候就调用了store.expandAll()操作,这样也就和原来的错误原因一样了。
后来自己将store.expandAll()操作放在了store.load()操作的加载完毕事件里面,才满足了自己的需求,至于是手工的 store.load(),还是autoLoad : true,都无所谓了。
store.on(”load”,function(e){
store.expandAll();
});
3.如何自定义的禁止编辑指定的某一行?
在代码中,我们可以很容易的让某一列不可编辑,因为EditorGridPanel的模型是基于列模型的,在定义列的时候,我们增加了一个 editor属性,去赋值一个编辑器对象,我们不给其赋值就可以实现某一列不可编辑的功能,但是行呢?在api中,似乎没有提供这个功能,看来只有自己去实现了。首先还是说说我自己的需求:
通过此图来描述我的需求。我的树形结构可能出现3-4级两种,图片所示是3级的情况,我允许编辑的行必须是树中叶子节点的行,比如“大修理”和 “维保”,而非叶子节点及根节点的数据,通过统计所在列的子节点对应数据得到。比如“网络维护成本-本部”,就是由“大修理-本部”和“维保-本部”累加得到,此处的值不允许编辑。所以得出以下结论:叶子节点所在行可编辑,非叶子节点行不可编辑。(至于统计相关代码在后面讨论,此处仅讨论编辑问题)
因此,我们可以由以下代码实现:
grid.on(”beforeedit”,function(e){
var currRecord = e.record;
if(!currRecord.get(’_is_leaf’)){
e.cancel = true;
}
});
此处是监听grid的beforeedit事件,在edit之前,判断此节点是不是叶子节点,如果不是叶子节点,则取消编辑状态。至于判断是不是叶子节点,可以通过之前的_is_leaf进行判断(_is_leaf是必须设置的,会影响到树形结构前面的“+”符号图案),另外也可以通过_level进行判断。
4.如何统计汇总所在列子节点的数值?
在这里,有两种方式进行统计,一种是后台统计好数据,通过json传递给前台Extjs,这种方式不再我们讨论范围,因为这种方式不需要讨论 ^_^。我们需要讨论的是,节点没有数据,仅叶子节点含有数据,节点数据是在前台汇总得到的值。
这里对所在列进行统计汇总,首先我就想到了ColumnModel的renderer(渲染)属性,此属性可以配置一个方法,在显示 EditorGridPanel时,调用渲染的方法来实现修改单元格的文字颜色、内容等功能。在这里我也将采用这种方式进行汇总数据。
我给ColumnModel的需要统计的列增加一个renderer:treeNodeSum属性,即在显示此列单元格时,每个单元格会分别调用 treeNodeSum方法。于是我们可以这样实现:
var totalValue;
function treeNodeSum(value, cellmeta, record, rowIndex, columnIndex, store){
if(record.get(’_is_leaf’)){
return value;
}else{
totalValue = 0;
totalNode(record,cellmeta.id);
return totalValue;
}
}
function totalNode(record,fieldName){
if(record.get(’_is_leaf’)){
totalValue += record.get(fieldName);
}
var mixedCollection = store.query(”_parent”,record.get(”_id”));
mixedCollection.each(function(item,index,length){
totalNode(item,fieldName);
});
}
首先是调用treeNodeSum方法,其中判断if(record.get(’_is_leaf’)),当此处为true时,证明此节点是叶子节点,是被统计项,不需要进行统计,所以直接返回。而非叶子节点,均是统计项,在这里,我写了一个递归函数,去遍历子节点及子节点的字节点等,当子节点是叶子节点时,将数值进行累加并返回。由此我们就可以在展示的时候汇总当前数据,并显示给用户了,也如之前的图所示,“主营业务成本”和“网络业务成本” 的数字均由前台统计出来的。
到这里,新的问题出来了,页面展示的时候,节点的统计数据出来了,但是当我修改后又怎么更新统计数据呢?将在下一个问题中进行讨论。
5.如何实时更新统计数据?
这里说到,在修改后实时统计,当然马上就联想到在编辑后这个事件下功夫了。首先找到编辑后的事件为:afteredit,
监听这个事件,当发生这个事件时去更新父节点的数据,并递归调用到根节点才结束循环。代码如下:
grid.on(”afteredit”,function(e){
var currValue;
var parentRecord;
var columnName = grid.getColumnModel().getDataIndex(e.column);
var currRecord = e.record;
while(currRecord.get(’_parent’)!==null){
parentRecord = store.getAt(store.find(”_id”,currRecord.get(’_parent’)));
currValue = parentRecord.get(columnName);
currValue -= e.originalValue;
currValue += e.value;
parentRecord.set(columnName,currValue);
parentRecord.dirty = false;
parentRecord.commit();
currRecord = parentRecord;
}
});
这样就可以在修改叶子节点数据后,实时的更新父节点的统计数据。但是这里出现一个情况,当代码去更新父节点的时候,父节点出现了带三角符号的已编辑状态,在获取store的已修改数据时,会获取到这些数据,这是我们不希望的,因此最好能去除掉统计节点的编辑状态,避免获取修改数据时获取到。
6.如何取消已编辑状态并除去提示的三角符号?
其实在上一节的代码中已经给出了代码,这里进行一下说明,通常步骤分为以下三步:
parentRecord.set(columnName,currValue);
parentRecord.dirty = false;
parentRecord.commit();
首先是修改数据,这个时候页面上会出现三角形的符号提示此字段已被修改。这个时候我们需要设置dirty=false,这样在store获取修改数据时就不会获得了,但是此刻界面上面没有更新,依然有三角符号的提示,这个时候我们需要commit()一下,就可以消除掉三角符号了。
7.如何一次性批量提交修改了的记录?
var results={};
var recordArray = store.getModifiedRecords();
var recordOld;
for(var i=0;i items = recordArray[i].getChanges();
recordOld = recordArray[i].modified;
for(var key in items){
if( recordOld[key]===”"){
results["item("+key+"#"+recordArray[i].get(”_id”)+”#Insert)”]=items[key];
}else{
results["item("+key+"#"+recordArray[i].get(”_id”)+”#Update)”]=items[key];
}
}
}
在这段代码里面,我们首先获取了已修改了的Record记录数组,之后再遍历这个数组,分别获得每一个修改了的具体字段,再通过判断原始值是不是为”"(在这里突然想到,如果没有值的话,.modified会不会是null?等有时间了测试一下),当为空代表是新增的数据,否则是修改的数据。通过这种方式,我们最终得到的resules对象,可以作为一个json对象通过Ajax的params属性直接赋值传递。
resules对象的json字符串例如:[{"item(YN#8888#Insert)":999}, {"item(YN#9999#Update)":888}]。
由于本人是使用java struts进行编程,因此后台可以用名叫item的Map进行获取(如何获取不明白的可以搜索下Map-Backed ActionForm的实现方式)。获得的Map的键值分别为:
YN#8888#Insert(键):999(值)
YN#9999#Update(键)::888(值)
这样的话我们就可以分析键来实现具体的业务了。
8.如何实时的分别提交修改了的记录?
此功能并未在我的代码里面使用,主要考虑到在用户的编辑过程当中一直不停的操作数据库不太好,但是如果数据较少的朋友也可以尝试此方式。可以通过注册afteredit事件实现。
grid.on(”afteredit”,function(e){
});
在此方法中传入的e参数实际上是一个Event,包含了此数据的值信息,行列值等,通过这些数据就可以得到此数据的归属,之后发起一个异步的Ajax 请求。这里最好还是做一下失败判断,如果有保存失败的提示用户,并且将修改了的值还原最好。当修改成功以后,清除修改提示状态。
评论
发表评论
-
js原型分析研究
2012-07-23 22:44 1432原型是个很微妙的东西,很多人不是很理解,理解了原型对于 ... -
Ext4.1.0 API中文版V0.4 Beta(持续更新)
2012-07-17 18:40 1075Ext4.1.0 API中文版V0.4 Beta html ... -
记录回答别人的Ext4问题
2012-07-10 13:23 26371:Ext4版本 双击Tab页面页签关闭 来自问题:ht ... -
Extjs4 时分秒日期插件
2012-05-11 13:05 12340插件1: 初始界面 弹出界面 插件代码 见附件 ... -
Ext3 日期范围插件
2012-04-03 17:32 2117先上 效果图有图有真相嘛 使用例子: ... -
Extjs2分页树 带查询功能
2012-03-29 11:37 4170先上效果图: 插件代码见附件 使 ... -
ext2 日期范围控件(2个控件)
2012-03-25 17:39 3006控件1 介绍: 首先加入 Ext.apply( ... -
ext2 grid 封装 (包含增删改查 导入导出等操作)
2012-02-27 14:32 5005最近项目又用到ext 比较 ... -
tree拖拽
2011-09-04 22:09 2423当时遇到如下问题: 拖拽A tree 的a节点到B tree ... -
ExtJS Web应用程序开发指南(第2版)(针对Ext JS 4.0更新)源代码
2011-08-11 14:56 1102ExtJS Web应用程序开发指南(第2版)(针对Ext JS ... -
通过拖拽Grid改变行的顺序
2010-10-08 13:06 3761<script> var meta ... -
使用注解和反射构造ext的grid需要的列模型
2010-09-18 12:03 1670注解类: package xzd; import ... -
ExtJs Grid分页时序号自增的实现
2010-08-23 16:28 3046首先看到网上都是类似 http://www.blogjava. ... -
extjs 自己的小小总结
2010-08-13 21:15 3289总结自己的代码 可能以后会用到 记录一下 方便以后查阅 1 ... -
eclipse 中怎样来集成 JBOSS
2010-08-09 08:46 0eclipse 中怎样来集成 JBOSS -
ext2,3,和4 版本 只显示年月的日期插件
2010-08-03 20:23 15680Ext技术交流群:164648099 1:ext3版本 ... -
ext grid 单元格提示 出现图片
2010-07-31 00:03 2646代码简单 只是记录一下 <html> ... -
ext tree相关知识
2010-07-30 23:53 2605ext tree 动态修改各个节点名称icon小图标 &qu ... -
ext 后台查数据库数据拼装tree数据
2010-07-26 22:21 2474来自:Extjs交流群(164648099) 说明: ... -
ext grid刷新后 滚动条位置不变
2010-07-19 21:11 2990Ext.override(Ext.grid.GridView, ...
相关推荐
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing 7、Ext.ux.grid....
EXTjs的上传组件
Most configuration options are inherited from Ext.Window (see ExtJs docs). The added ones are: url - the url where to post uploaded files. base_params - additional post params (default to {}). ...
extjs3.0 ext3.0 ext文档 ext例子
Packtpub ExtJS 3.0 Cookbook.Oct.2009
绝对的ExtJS3.0中文API,本人在网上找了好久才找到的,在此奉献给大家!!解压后有30多兆!!
ExtJs3.0 一款优秀的JavaScript框架! 虽然使用方便,采用json格式定义,但是各种控件功能繁多,很难一下记住! ExtJs开发团队推出了Ext-Designer,即ExtJs可视化控件拖动设计器,使用起来相当的方便,大大提高了ExtJs...
extjs 3.0中文api ext.net 中文api 不管你会extjs还是ext.net一个中文api 你必不可少的选择
Ext.ux.GoogleChart extjs插件Ext.ux.GoogleChart extjs插件
Extjs4实现的Ext.ux.form.TinyMCETextArea html580 inyMCETextArea
extJS3.0 extJS3.0 extJS3.0 extJS3.0 extJS3.0 extJS3.0 extJS3.0
ExtJs选中var editor = new Ext.ux.grid.RowEditor详解.txt
Extjs4 comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用。来源于网络,稍作修改。
ExtJs3.0 中文破解视图编辑器.rar AIR安装程序 Ext 帮组文档 你的支持就是我上传的动力 资源共享
NULL 博文链接:https://lingf.iteye.com/blog/1188654
Extjs3.0中文API文档 够详细 够详细 够详细
该ext.jsb2文件是ExtJS3.4.0中的,因ExtJS4.0.0中没有这个文件,但可以与4.0.0版本共用。
感谢 Ericzhen 远离颠倒梦想,蕴籍无上清凉 这里引用它的资源 仅作分享 http://www.cnblogs.com/Ericzhen/archive/2012/06/11/2545186.html
ExtJS3.0 源码分析与开发实例宝典