这篇博客是小弟之前写在cnblogs的,发现cnblogs的人气太少,所以准备博客搬家到csdn。希望大家多多关照。
搞了半天,没弄明白,csdn为什么不能像csdn一样可以代码高亮显示啊。
没搞明白这个编辑器怎么用的,需要修改代码的朋友,请到http://www.cnblogs.com/yon2068/archive/2012/07/03/2575375.html 看高亮显示的代码。
最近项目开发要求用树形列表显示多列数据,结构例如:
研发部
|--张三 男 25岁
|--李四 女 25岁
项目部
|--王二 男 18岁
接到任务后,首先想到的时Ext的Tree控件,但Ext.Tree.Treepanel只能显示单列数据,也就是说无法显示 "性别"和"年龄"这两个字段。
到网上查了相关资料后发现Ext拓展的TreeGrid是Table数,可以满足自己的需求,但TreeGrid在用的时候遇到了一个棘手的问题:没有原生TreeNode的CheckBox功能。
查了半天资料也到了比较完美的解决方案:
一、解决方法:
打开TreeGridNodeUI.js文件,将下面记为绿色的代码插入到相应位置,并保存文件。
1 /*! 2 * Ext JS Library 3.4 3 * Copyright(c) 2006-2010 Sencha Inc. 4 * licensing@sencha.com 5 * http://www.sencha.com/license 6 */ 7 /** 8 * @class Ext.ux.tree.TreeGridNodeUI 9 * @extends Ext.tree.TreeNodeUI 10 */ 11 Ext.ux.tree.TreeGridNodeUI = Ext.extend(Ext.tree.TreeNodeUI, { 12 isTreeGridNodeUI: true, 13 14 renderElements : function(n, a, targetNode, bulkRender){ 15 var t = n.getOwnerTree(), 16 cols = t.columns, 17 c = cols[0], 18 i, buf, len; 19 20 this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : ''; 21 22 var cb = Ext.isBoolean(a.checked); 23 buf = [ 24 '<tbody class="x-tree-node">', 25 '<tr ext:tree-node-id="', n.id ,'" class="x-tree-node-el x-tree-node-leaf ', a.cls, '">', 26 '<td class="x-treegrid-col">', 27 '<span class="x-tree-node-indent">', this.inde