var CheckboxTree = function() { CheckboxTree.superclass.constructor.call(this, { renderTo : 'checkboxTree', title : '所有部门 - ExtJs自带的例子', height : 300, width : 400, frame : false, useArrows : true, //是否使用箭头样式 autoScroll: true, animate : true, enableDD : true, containerScroll: true, rootVisible : false, root: { nodeType : 'async', text : '所有部门', expanded : true, draggable: false }, dataUrl : "js/widgets/tree/CheckboxTree.php", /** 事件监听 */ listeners: { 'checkchange': function(node, checked){ if(checked) node.getUI().addClass('complete'); else node.getUI().removeClass('complete'); } }, /** 按钮组 */ buttons: [{ text: '得到选中节点值', scope : this, handler: function(){ var msg = '', selNodes = this.getChecked(); Ext.each(selNodes, function(node){ if(msg.length > 0){ msg += ''; } msg += node.text; }); Ext.Msg.show({ title: '选中内容', msg: msg.length > 0 ? msg : '无选中', icon: Ext.Msg.INFO, minWidth: 200, buttons: Ext.Msg.OK }); } }] }); }; 当然,为了达到更好的效果,还定义了一个 ext 事件,用于实现勾选 / 反选父节点时自动勾选 / 反选所有子节点: tree.on('checkchange', function(node, checked) { node.expand(); node.attributes.checked = checked; node.eachChild(function(child) { child.ui.toggleCheck(checked); child.attributes.checked = checked; child.fireEvent('checkchange', child, checked); }); }, tree); Ext.extend(CheckboxTree, Ext.tree.TreePanel); new CheckboxTree();