定制:列树(Customizing: Column Tree)

Posted 周四, 06/19/2008 - 00:47 by admin

演示(demo)地址在文章最后.

效果图如下:

主要文件column-tree.html,column-tree.js,column-tree.css,ColumnNodeUI.js,column-data.php(一般服务器不支持.json后缀，我将column-data.json改为column-data.php)。

column-tree.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Customizing TreePanel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>

    <script type="text/javascript" src="ColumnNodeUI.js"></script>
    <script type="text/javascript" src="column-tree.js"></script>

    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../examples.css" />

    <link rel="stylesheet" type="text/css" href="column-tree.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<h1>Customizing TreePanel</h1>
<p>This example shows demonstrates how you can customize a TreePanel to display basic columns.</p>

<div id="tree-ct">
    
</div>

<br /><br /><br /><br /><br />
</body>
</html>

column-tree.js

/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing＠extjs.com
 * 
 * extjs.com/license
 */

Ext.onReady(function(){
    var tree = new Ext.tree.ColumnTree({
        el:'tree-ct',
        width:552,
        autoHeight:true,
        rootVisible:false,
        autoScroll:true,
        title: 'Example Tasks',
        
        columns:[{
            header:'Task',
            width:350,
            dataIndex:'task'
        },{
            header:'Duration',
            width:100,
            dataIndex:'duration'
        },{
            header:'Assigned To',
            width:100,
            dataIndex:'user'
        }],

        loader: new Ext.tree.TreeLoader({
            dataUrl:'column-data.php',
            uiProviders:{
                'col': Ext.tree.ColumnNodeUI
            }
        }),

        root: new Ext.tree.AsyncTreeNode({
            text:'Tasks'
        })
    });
    tree.render();
});

column-tree.css

/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing＠extjs.com
 * 
 * extjs.com/license
 */

.x-column-tree .x-tree-node {
    zoom:1;
}
.x-column-tree .x-tree-node-el {
    /*border-bottom:1px solid #eee; borders? */
    zoom:1;
}
.x-column-tree .x-tree-selected {
    background: #d9e8fb;
}
.x-column-tree  .x-tree-node a {
    line-height:18px;
    vertical-align:middle;
}
.x-column-tree  .x-tree-node a span{
	
}
.x-column-tree  .x-tree-node .x-tree-selected a span{
	background:transparent;
	color:#000;
}
.x-tree-col {
    float:left;
    overflow:hidden;
    padding:0 1px;
    zoom:1;
}

.x-tree-col-text, .x-tree-hd-text {
    overflow:hidden;
    -o-text-overflow: ellipsis;
	text-overflow: ellipsis;
    padding:3px 3px 3px 5px;
    white-space: nowrap;
    font:normal 11px arial, tahoma, helvetica, sans-serif;
}

.x-tree-headers {
    background: #f9f9f9 url(../../resources/images/default/grid/grid3-hrow.gif) repeat-x 0 bottom;
	cursor:default;
    zoom:1;
}

.x-tree-hd {
    float:left;
    overflow:hidden;
    border-left:1px solid #eee;
    border-right:1px solid #d0d0d0;
}

.task {
    background-image:url(../shared/icons/fam/cog.png) !important;
}
.task-folder {
    background-image:url(../shared/icons/fam/folder_go.png) !important;
}

ColumnNodeUI.js

/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing＠extjs.com
 * 
 * extjs.com/license
 */

Ext.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
    lines:false,
    borderWidth: Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
    cls:'x-column-tree',
    
    onRender : function(){
        Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
        this.headers = this.body.createChild(
            {cls:'x-tree-headers'},this.innerCt.dom);

        var cols = this.columns, c;
        var totalWidth = 0;

        for(var i = 0, len = cols.length; i < len; i++){
             c = cols[i];
             totalWidth += c.width;
             this.headers.createChild({
                 cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
                 cn: {
                     cls:'x-tree-hd-text',
                     html: c.header
                 },
                 style:'width:'+(c.width-this.borderWidth)+'px;'
             });
        }
        this.headers.createChild({cls:'x-clear'});
        // prevent floats from wrapping when clipped
        this.headers.setWidth(totalWidth);
        this.innerCt.setWidth(totalWidth);
    }
});

Ext.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
    focus: Ext.emptyFn, // prevent odd scrolling behavior

    renderElements : function(n, a, targetNode, bulkRender){
        this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';

        var t = n.getOwnerTree();
        var cols = t.columns;
        var bw = t.borderWidth;
        var c = cols[0];

        var buf = [
             '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',
                '<div class="x-tree-col" style="width:',c.width-bw,'px;">',
                    '<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">',
                    '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',
                    a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
                    '<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",
                "</div>"];
         for(var i = 1, len = cols.length; i < len; i++){
             c = cols[i];

             buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
                        '<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",
                      "</div>");
         }
         buf.push(
            '<div class="x-clear"></div></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.firstChild.childNodes;
        this.indentNode = cs[0];
        this.ecNode = cs[1];
        this.iconNode = cs[2];
        this.anchor = cs[3];
        this.textNode = cs[3].firstChild;
    }
});

column-data.php(一般服务器不支持.json后缀，我将column-data.json改为column-data.php)

[{
    task:'ColumnTree Example',
    duration:'3 hours',
    user:'',
    uiProvider:'col',
    cls:'master-task',
    iconCls:'task-folder',
    children:[{
        task:'Abstract rendering in TreeNodeUI',
        duration:'15 min',
        user:'Jack Slocum',
        uiProvider:'col',
        leaf:true,
        iconCls:'task'
    },{
        task:'Create TreeNodeUI with column knowledge',
        duration:'45 min',
        user:'Jack Slocum',
        uiProvider:'col',
        leaf:true,
        iconCls:'task'
    },{
        task:'Create TreePanel to render and lock headers',
        duration:'30 min',
        user:'Jack Slocum',
        uiProvider:'col',
        leaf:true,
        iconCls:'task'
    },{
        task:'Add CSS to make it look fly',
        duration:'30 min',
        user:'Jack Slocum',
        uiProvider:'col',
        leaf:true,
        iconCls:'task'
    },{
        task:'Test and make sure it works',
        duration:'1 hour',
        user:'Jack Slocum',
        uiProvider:'col',
        leaf:true,
        iconCls:'task'
    }]
},{
    task:'Custom Field Example',
    duration:'2 1/2 hours',
    user:'',
    uiProvider:'col',
    cls:'master-task',
    iconCls:'task-folder',
    children:[{
        task:'Implement "Live Search" on extjs.com from Alex',
        duration:'1 hour',
        user:'Jack Slocum',
        uiProvider:'col',
        leaf:true,
        iconCls:'task'
    },{
        task:'Extend TwinTrigger',
        duration:'30 min',
        user:'Jack Slocum',
        uiProvider:'col',
        leaf:true,
        iconCls:'task'
    },{
        task:'Testing and debugging',
        duration:'1 hour',
        user:'Jack Slocum',
        uiProvider:'col',
        leaf:true,
        iconCls:'task'
    }]
},{
    task:'Foo Bar Item',
    duration:'3 hours',
    user:'',
    uiProvider:'col',
    cls:'master-task',
    iconCls:'task-folder',
    children:[{
        task:'Abstract rendering in TreeNodeUI',
        duration:'15 min',
        user:'Jack Slocum',
        uiProvider:'col',
        leaf:true,
        iconCls:'task'
    },{
        task:'Create TreeNodeUI with column knowledge',
        duration:'45 min',
        user:'Jack Slocum',
        uiProvider:'col',
        leaf:true,
        iconCls:'task'
    },{
        task:'Create TreePanel to render and lock headers',
        duration:'30 min',
        user:'Jack Slocum',
        uiProvider:'col',
        leaf:true,
        iconCls:'task'
    },{
        task:'Add CSS to make it look fly',
        duration:'30 min',
        user:'Jack Slocum',
        uiProvider:'col',
        leaf:true,
        iconCls:'task'
    },{
        task:'Test and make sure it works',
        duration:'1 hour',
        user:'Jack Slocum',
        uiProvider:'col',
        leaf:true,
        iconCls:'task'
    }]
},{
    task:'WTF Item',
    duration:'3 hours',
    user:'',
    uiProvider:'col',
    cls:'master-task',
    iconCls:'task-folder',
    children:[{
        task:'Abstract rendering in TreeNodeUI',
        duration:'15 min',
        user:'Jack Slocum',
        uiProvider:'col',
        leaf:true,
        iconCls:'task'
    },{
        task:'Create TreeNodeUI with column knowledge',
        duration:'45 min',
        user:'Jack Slocum',
        uiProvider:'col',
        leaf:true,
        iconCls:'task'
    },{
        task:'Create TreePanel to render and lock headers',
        duration:'30 min',
        user:'Jack Slocum',
        uiProvider:'col',
        leaf:true,
        iconCls:'task'
    },{
        task:'Add CSS to make it look fly',
        duration:'30 min',
        user:'Jack Slocum',
        uiProvider:'col',
        leaf:true,
        iconCls:'task'
    },{
        task:'Test and make sure it works',
        duration:'1 hour',
        user:'Jack Slocum',
        uiProvider:'col',
        leaf:true,
        iconCls:'task'
    }]
}]

演示地址:http://extjs.org.cn/extjs/examples/tree/column-tree.html