ext树的带复选框

[danengnai__]

我的ext带复选框后就不能级联选中了

比方说选中了子结点，父节点却没有被选中，这都是怎么回事？

[triace_zhang]

extjs的TreePanel默认所用到的TreeNodeUI类本身不支持级联选择，这个需要你自己写代码的。

[peacock]

已经有人扩展了，详见：
http://www.verycd.com/groups/@u2470031/239980.topic

[yeah920]

帮忙顶一下

[sy_binbin]

[Quote=引用 2 楼 peacock 的回复:]
已经有人扩展了，详见：
http://www.verycd.com/groups/@u2470031/239980.topic
[/Quote]
支持一下

[yongtree]

/**
* 此js为yongtree的扩展类,用于对ext功能扩展,部分代码来源于网络.
*
* @author yongtree
* @version 1.0
*/

/**
* @class Ext.tree.TreeCheckNodeUI
* @extends Ext.tree.TreeNodeUI
*
* 对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性
*
* 扩展的功能点有： 一、支持只对树的叶子进行选择 只有当返回的树结点属性leaf = true 时，结点才有checkbox可选
* 使用时，只需在声明树时，加上属性 onlyLeafCheckable: true 既可，默认是false
*
* 二、支持对树的单选 只允许选择一个结点 使用时，只需在声明树时，加上属性 checkModel: "single" 既可
*
* 二、支持对树的级联多选
* 当选择结点时，自动选择该结点下的所有子结点，以及该结点的所有父结点（根结点除外），特别是支持异步，当子结点还没显示时，会从后台取得子结点，然后将其选中/取消选中
* 使用时，只需在声明树时，加上属性 checkModel: "cascade" 既可
*
* 三、添加"check"事件 该事件会在树结点的checkbox发生改变时触发 使用时，只需给树注册事件,如：
* tree.on("check",function(node,checked){...});
*
* 默认情况下，checkModel为'multiple'，也就是多选，onlyLeafCheckable为false，所有结点都可选
*
* 使用方法：在loader里加上 baseAttrs:{uiProvider:Ext.tree.TreeCheckNodeUI} 既可. 例如： var
* tree = new Ext.tree.TreePanel({ el:'tree-ct', width:568, height:300,
* checkModel: 'cascade', //对树的级联多选 onlyLeafCheckable: false,//对树所有结点都可选
* animate: false, rootVisible: false, autoScroll:true, loader: new
* Ext.tree.DWRTreeLoader({ dwrCall:Tmplt.getTmpltTree, baseAttrs: { uiProvider:
* Ext.tree.TreeCheckNodeUI } //添加 uiProvider 属性 }), root: new
* Ext.tree.AsyncTreeNode({ id:'0' }) });
* tree.on("check",function(node,checked){alert(node.text+" = "+checked)});
* //注册"check"事件 tree.render();
*
*/

Ext.tree.TreeCheckNodeUI = function() {
// 'multiple':多选; 'single':单选; 'cascade':级联多选
this.checkModel = 'multiple';

// only leaf can checked
this.onlyLeafCheckable = false;

Ext.tree.TreeCheckNodeUI.superclass.constructor.apply(this, arguments);
};

Ext.extend(Ext.tree.TreeCheckNodeUI, Ext.tree.TreeNodeUI, {

renderElements : function(n, a, targetNode, bulkRender) {
var tree = n.getOwnerTree();
this.checkModel = tree.checkModel || this.checkModel;
this.onlyLeafCheckable = tree.onlyLeafCheckable || false;

// add some indent caching, this helps performance when rendering a
// large tree
this.indentMarkup = n.parentNode
? n.parentNode.ui.getChildIndent()
: '';

var cb = (!this.onlyLeafCheckable || a.leaf);
var href = a.href ? a.href : Ext.isGecko ? "" : "#";
var buf = [
'<li class="x-tree-node"><div ext:tree-node-id="',
n.id,
'" class="x-tree-node-el x-tree-node-leaf x-unselectable ',
a.cls,
'" unselectable="on">',
'<span class="x-tree-node-indent">',
this.indentMarkup,
"</span>",
'<img src="',
this.emptyIcon,
'" class="x-tree-ec-icon x-tree-elbow" />',
'<img src="',
a.icon || this.emptyIcon,
'" class="x-tree-node-icon',
(a.icon ? " x-tree-node-inline-icon" : ""),
(a.iconCls ? " " + a.iconCls : ""),
'" unselectable="on" />',
cb
? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked
? 'checked="checked" />'
: '/>'))
: '',
'<a hidefocus="on" class="x-tree-node-anchor" href="', href,
'" tabIndex="1" ',
a.hrefTarget ? ' target="' + a.hrefTarget + '"' : "",
'><span unselectable="on">', n.text, "</span></a></div>",
'<ul class="x-tree-node-ct" style="display:none;"></ul>',
"</li>"].join('');

var nel;
if (bulkRender !== true && n.nextSibling
&& (nel = n.nextSibling.ui.getEl())) {
this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
} else {
this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
}

this.elNode = this.wrap.childNodes[0];
this.ctNode = this.wrap.childNodes[1];
var cs = this.elNode.childNodes;
this.indentNode = cs[0];
this.ecNode = cs[1];
this.iconNode = cs[2];
var index = 3;
if (cb) {
this.checkbox = cs[3];
Ext.fly(this.checkbox).on('click',
this.check.createDelegate(this, [null]));
index++;
}
this.anchor = cs[index];
this.textNode = cs[index].firstChild;
},

// private
check : function(checked) {
var n = this.node;
var tree = n.getOwnerTree();
this.checkModel = tree.checkModel || this.checkModel;

if (checked === null) {
checked = this.checkbox.checked;
} else {
this.checkbox.checked = checked;
}

n.attributes.checked = checked;
tree.fireEvent('check', n, checked);

if (!this.onlyLeafCheckable && this.checkModel == 'cascade') {
var parentNode = n.parentNode;
// 下面这段的作用是：选择子节点同时选择父节点。为了设置参与者的实际情况，现在修改成选择子结点不会选择父节点。
// if(parentNode != null) {
// this.parentCheck(parentNode,checked);
// }
if (!n.expanded && !n.childrenRendered) {
n.expand(false, false, this.childCheck);
} else {
this.childCheck(n);
}
} else if (this.checkModel == 'single') {
var checkedNodes = tree.getChecked();
for (var i = 0; i < checkedNodes.length; i++) {
var node = checkedNodes[i];
if (node.id != n.id) {
node.getUI().checkbox.checked = false;
node.attributes.checked = false;
tree.fireEvent('check', node, false);
}
}
}

},

// private
childCheck : function(node) {
var a = node.attributes;
if (!a.leaf) {
var cs = node.childNodes;
var csui;
for (var i = 0; i < cs.length; i++) {
csui = cs[i].getUI();
if (csui.checkbox.checked ^ a.checked)
csui.check(a.checked);
}
}
},

// private
parentCheck : function(node, checked) {
var checkbox = node.getUI().checkbox;
if (typeof checkbox == 'undefined')
return;
if (!(checked ^ checkbox.checked))
return;
if (!checked && this.childHasChecked(node))
return;
checkbox.checked = checked;
node.attributes.checked = checked;
node.getOwnerTree().fireEvent('check', node, checked);

var parentNode = node.parentNode;
if (parentNode !== null) {
this.parentCheck(parentNode, checked);
}
},

// private
childHasChecked : function(node) {
var childNodes = node.childNodes;
if (childNodes || childNodes.length > 0) {
for (var i = 0; i < childNodes.length; i++) {
if (childNodes[i].getUI().checkbox.checked)
return true;
}
}
return false;
},

toggleCheck : function(value) {
var cb = this.checkbox;
if (cb) {
var checked = (value === undefined ? !cb.checked : value);
this.check(checked);
}
}
});

[yongtree]

[Quote=引用 5 楼 yongtree 的回复:]
/**
* 此js为yongtree的扩展类,用于对ext功能扩展,部分代码来源于网络.
*
* @author yongtree
* @version 1.0
*/

/**
* @class Ext.tree.TreeCheckNodeUI
* @extends Ext.tree.TreeNodeUI
*
* 对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性
*
* 扩展的功能点有： 一、支持只对树的叶子进行选择 只有当返回的树结点属性leaf = true 时，结点才有checkbox可…
[/Quote]

引入到要使用树的页面就可以了

[Joschime]

up

[qianqian51267]

[Quote=引用 6 楼 yongtree 的回复:]
引用 5 楼 yongtree 的回复:
/**
* 此js为yongtree的扩展类,用于对ext功能扩展,部分代码来源于网络.
*
* @author yongtree
* @version 1.0
*/

/**
* @class Ext.tree.TreeCheckNodeUI
* @extends Ext.tree.TreeNodeUI
*
* 对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性
*
* 扩展的功能点有： 一、支持只对树的叶子进行选择 只有当返回的树结点属性leaf …
[/Quote]

我用的就是这个，问题就是无法级联选择

[lynn_9527]

学习中。。。

[danengnai__]

没办法

自己改写了一个Ext.tree.TreeNodeUI