Ext CheckTreeNode Example-优快云博客

本文链接：https://blog.youkuaiyun.com/chenxueyong7345/article/details/83355271

实例：

实例是模仿dhtmlxTree的
在render中主要添加了这一行'<img src="', a.isCheck ? "/images/tc/iconCheckAll.gif" : "/images/tc/iconUnCheckAll.gif",'" class="x-tree-ec-icon">',
再获取这个节点 this.ckNode = cs[2];
在initEvents中添加该节点的事件：
E.on(this.ckNode, "click", this.ckClick, this, true);
很简单！

Java代码

Ext.tree.TreeNodeUI.prototype.initEvents = function(){
this.node.on("move", this.onMove, this);
var E = Ext.EventManager;
var a = this.anchor;
var el = Ext.fly(a);
if(Ext.isOpera){ // opera render bug ignores the CSS
el.setStyle("text-decoration", "none");
}
el.on("click", this.onClick, this);
el.on("dblclick", this.onDblClick, this);
el.on("contextmenu", this.onContextMenu, this);
var icon = Ext.fly(this.iconNode);
icon.on("click", this.onClick, this);
icon.on("dblclick", this.onDblClick, this);
icon.on("contextmenu", this.onContextMenu, this);
E.on(this.ecNode, "click", this.ecClick, this, true);
E.on(this.ckNode, "click", this.ckClick, this, true);
if(this.node.disabled){
this.addClass("x-tree-node-disabled");
}
if(this.node.hidden){
this.addClass("x-tree-node-disabled");
}
var ot = this.node.getOwnerTree();
var dd = ot.enableDD || ot.enableDrag || ot.enableDrop;
if(dd && (!this.node.isRoot || ot.rootVisible)){
Ext.dd.Registry.register(this.elNode, {
node: this.node,
handles: [this.iconNode, this.textNode],
isHandle: false
});
}
};
Ext.tree.TreeNodeUI.prototype.ckClick = function(e){
if(!this.animating && this.node.hasChildNodes()){
this.node.expand();
}
this.updateCheckIcon();
};
Ext.tree.TreeNodeUI.prototype.updateCheckIcon = function(){
if(this.node.attributes.isCheck)
{
this.ckNode.src="/images/tc/iconUnCheckAll.gif";
this.node.attributes.isCheck=false;
this.updateFCUNCheckIcon(this.node.parentNode);//只能放在上一句的后面
this.updateCCUNCheckIcon(this.node.childNodes);
}
else
{
this.ckNode.src="/images/tc/iconCheckAll.gif";
this.node.attributes.isCheck=true;
this.updateFCheckIcon(this.node.parentNode);//只能放在上一句的后面
this.updateCCheckIcon(this.node.childNodes);//只能放在上一句的后面
}
};
//更新父接点为选种
Ext.tree.TreeNodeUI.prototype.updateFCheckIcon = function(pn){
if(pn!=null)
{
pn.attributes.isCheck=true;
pn.ui.ckNode.src="/images/tc/iconCheckAll.gif";
this.updateFCheckIcon(pn.parentNode);
}
}
//更新子节点为选种
Ext.tree.TreeNodeUI.prototype.updateCCheckIcon = function(cn){
if(cn!=null)
{
for(var i=0;i<cn.length;i++)
{
cn[i].attributes.isCheck=true;
cn[i].ui.ckNode.src="/images/tc/iconCheckAll.gif";
if(cn[i].hasChildNodes()){
cn[i].expand();
var temp=cn[i].childNodes;
this.updateCCheckIcon(cn[i].childNodes);
}
}
}
}
//更新父接点为不�?�?
Ext.tree.TreeNodeUI.prototype.updateFCUNCheckIcon = function(n){
//如果有其它的兄弟接点未勾选掉。不更改父节�?
var flag=true;
if(n!=null)//如果是父节点，此处为空�?�?��要在这进行判�?
{
var nodes = n.childNodes;
for(var i=0;i<nodes.length;i++)
{
if(nodes[i].attributes.isCheck)
{
flag=false
break;
}
}
if(n!=null && flag)
{
n.attributes.isCheck=false;
n.ui.ckNode.src="/images/tc/iconUnCheckAll.gif";
this.updateFCUNCheckIcon(n.parentNode);
}
}
}
//更新子接点为不�?�?
Ext.tree.TreeNodeUI.prototype.updateCCUNCheckIcon = function(cn){
if(cn!=null)
{
for(var i=0;i<cn.length;i++)
{
cn[i].attributes.isCheck=false;
cn[i].ui.ckNode.src="/images/tc/iconUnCheckAll.gif";
if(cn[i].hasChildNodes()){
cn[i].expand();
var temp=cn[i].childNodes;
this.updateCCUNCheckIcon(cn[i].childNodes);
}
}
}
}
Ext.tree.TreeNodeUI.prototype.render=function(bulkRender){
var n = this.node;
var targetNode = n.parentNode ?
n.parentNode.ui.getContainer() : n.ownerTree.container.dom;
if(!this.rendered){
this.rendered = true;
var a = n.attributes;
// add some indent caching, this helps performance when rendering a large tree
this.indentMarkup = "";
if(n.parentNode){
this.indentMarkup = n.parentNode.ui.getChildIndent();
}
var buf = ['<li class="x-tree-node"><div class="x-tree-node-el ', n.attributes.cls,'">',
'<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
'<img src="', this.emptyIcon, '" class="x-tree-ec-icon">',
'<img src="', a.isCheck ? "/images/tc/iconCheckAll.gif" : "/images/tc/iconUnCheckAll.gif",'" class="x-tree-ec-icon">',
'<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),'" unselectable="on">',
'<a hidefocus="on" href="',a.href ? a.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>"];
if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
n.nextSibling.ui.getEl(), buf.join(""));
}else{
this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
}
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.ckNode = cs[2];
this.iconNode = cs[3];
this.anchor = cs[4];
this.textNode = cs[4].firstChild;
if(a.qtip){
if(this.textNode.setAttributeNS){
this.textNode.setAttributeNS("ext", "qtip", a.qtip);
if(a.qtipTitle){
this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
}
}else{
this.textNode.setAttribute("ext:qtip", a.qtip);
if(a.qtipTitle){
this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
}
}
}
this.initEvents();
//this.renderIndent(); cached above now instead call updateExpandIcon
this.updateExpandIcon();
}else{
if(bulkRender === true) {
targetNode.appendChild(this.wrap);
}
}
};
//===============================================================================================================
Ext.onReady(function(){
// shorthand
Ext.get("loading").remove();
var Tree = Ext.tree;
var dh = Ext.DomHelper;
var tree = new Tree.TreePanel('tree-div', {
animate:true,
loader: new Tree.TreeLoader({dataUrl:'/tree/getTreeJson'}),
containerScroll: true
//uiProvider: MyNodeUI
});
tree.on('contextmenu',contextmenu,tree);
//tree.on('expand',insertCheckbox,tree);
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Topic',
draggable:false,
isCheck:true,
id:'1'
});
tree.setRootNode(root);
//render the tree
tree.render();
var editor = new Ext.tree.TreeEditor(tree, {allowBlank: false});
editor.setSize(5,5);
//root.expand(true,false);
//容许树可以编�?
//var ge = new Ext.tree.TreeEditor(tree, {allowBlank:false,blankText:'A name is required',selectOnFocus:true});
//创建右键菜单
function contextmenu(node,e){
e.stopEvent();
//var temp=ds.getAt(node.id);
// alert(temp.data.email);
var menu = new Ext.menu.Menu({
id: 'mainMenu',
items: [
new Ext.menu.Item({
text: '添加'
}),
new Ext.menu.Item({
text: '删除'
}),
new Ext.menu.Item({
text: '更新'
}),
new Ext.menu.Item({
text: '刷新'
})
]
});
var coords = e.getXY();
menu.showAt([coords[0], coords[1]]);
};
});
//treeLoader.on('beforeload', function(loader,node,callback){
// if(node.attributes.tlevel != 3){
// loader.dataUrl ='../getChildTreeNodeJsonObject';
// }else{
// return false;
// }
// });