ExtJs复选框树，可实现节点选中自动选中父节点子节点（权限树）

废话不说先贴图，贴代码



index.js

[javascript] view
plaincopy

Ext.onReady(function(){

var extPanel = new Ext.ux.ExtendTreePanel({

title:'Extend TreePanel',

titleCollapse:false,

progressBar:new Ext.ProgressBar({

text:'Progress'

}),

bbar:[],

root:new Ext.tree.AsyncTreeNode({

id:'rootNode',

checked:false,

allowDrag:false,

leaf:false,

loader: new Ext.tree.TreeLoader(),

text:'Root Node',

children:[

{text:'Child1',

leaf:false,

checked:false,

children:[

{

text:'Child11',

leaf:true,

checked:false

},

{

text:'Child12',

leaf:true,

checked:false

}

]

},

{text:'Child2',

leaf:false,

checked:false,

children:[

{

text:'Child21',

leaf:true,

checked:false

},

{

text:'Child22',

leaf:true,

checked:false

}

]

}

]

})

});



var win = new Ext.Window({

title:'LoginWindow',

width:500,

height:400,

frame:true,

border:false,

layout:'fit',

draggable:false,

closable:false,

modal:true,

items:[

extPanel

]

});

win.show();

});

ExtendTreePanel.js

[html] view
plaincopy

Ext.namespace('Ext.ux');

ExtExt.ux.ExtendTreePanel = Ext.extend(Ext.tree.TreePanel,{

initComponent:function(){

this.addEvents(

'nodechecked'

);



this.addListener({

checkchange:{

fn:function(node,checked){

if(!node.loaded){//子节点是否加载

node.expand();

}

this.selectChildNodes(node,checked);//选定子节点

if(node.parentNode){

this.selectParentNodes(node,checked);//是否选定父节点

}

},

scope:this

},

render:{

fn:function(){

this.progressBar.setWidth(this.getBottomToolbar().el.getWidth()-5);

},

scope:this

},

resize:{

fn:function(){

this.progressBar.setWidth(this.getBottomToolbar().el.getWidth()-5);

},

scope:this

}



});

this.bbar.push(this.progressBar);

Ext.ux.ExtendTreePanel.superclass.initComponent.call(this);

},

selectChildNodes:function(Node,checked){

Node.eachChild(function(node){

node.attributes.checked = checked;

node.getUI().toggleCheck(checked);

if(!node.leaf){

if(!node.loaded){

node.expand();

}

this.selectChildNodes(node,checked);

}

},this);

},

...................

因为最近工作需要用到一个权限树，自己动手写的一个小小的插件，可实现节点选中时，自动搜索子节点并选中，自动遍历父节点，根据节点选中状态设置父节点当前的选中状态。本人ExtJS菜鸟，还请各位大虾指点。