[ExtJS]範例Tree元件的使用Ext.tree.TreePanel

ExtJS的TreePanel樹是繼承Ext.Panel，所以它可以算是一個Container，不過它也是算是一個ExtJS的Component，給於TreeNode來完成樹狀結果，可以應用在選單或是分類等地方。像是下圖

左邊圖是設定rootVisible : false，而右邊圖是設定rootVisible : true，根結點是否顯示

相關資料

底下介紹TreePanel的二種寫法

1.直接使用利用腳本來產生樹

這個的好處是比較好寫，省的麻煩，不過如果要單獨取得樹的內容顯的比較麻煩點

javascript code

/*
 * ! Ext JS Library 3.2.1 Copyright(c) 2006-2010 Ext JS, Inc.
 * [email protected] http://www.extjs.com/license
 */

Ext.BLANK_IMAGE_URL = 'images/vista/s.gif';

Ext.onReady( function() {
    var viewport = new Ext.tree.TreePanel( {

        title : "系統相關",
        width : 200,

        height : 500,
        rootVisible : true,//root結點顯不顯示
        root : new Ext.tree.AsyncTreeNode( {
            text : '根',

            children : [ {
                text : '個人資料',
                children : [ {
                    text : '個人資料維護',
                    leaf : true
                }, {
                    text : '密碼變更',
                    leaf : true
                } ]
            }, {
                text : '客戶資料',
                children : [ {
                    text : '客戶基本資料查詢維護',
                    leaf : true
                }, {
                    text : '客戶基本資料列印',
                    leaf : true
                } ]
            }, {
                text : '帳號及系統',
                children : [ {
                    text : '帳號管理作業',
                    leaf : true
                }, {
                    text : '系統參數設定',
                    leaf : true
                }, {
                    text : '作業選單管理',
                    leaf : true
                } ]
            }, {
                text : '匯入及匯出',
                children : [ {
                    text : '批次匯入',
                    leaf : true
                }, {
                    text : '批次匯出',
                    leaf : true
                } ]
            } ]
        })

    });

    viewport.render('toolbar');
    viewport.doLayout();

});

html code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/extensive.css" />
<script type="text/javascript" src="js/ext-base.js"></script>  
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/Menu.js"></script>
</head>
<body>

<div id="toolbar" ></div>
</body>
</html>

2.每一個結點都new一個新物件

這個的好處是可以直接使用new出來的物件，不過需要key很多的程式碼

javascript code

/*
 * ! Ext JS Library 3.2.1 Copyright(c) 2006-2010 Ext JS, Inc.
 * [email protected] http://www.extjs.com/license
 */

Ext.BLANK_IMAGE_URL = 'images/vista/s.gif';

Ext.onReady( function() {

    var root = new Ext.tree.TreeNode( {
        text : '跟'
    });

    var node1Child1 = new Ext.tree.TreeNode( {
        text : '個人資料維護',
        leaf : 'true'// 是否為末結果,樹葉
    });
    var node1Child2 = new Ext.tree.TreeNode( {
        text : '密碼變更',
        leaf : 'true'// 是否為末結果,樹葉
    });

    var node1 = new Ext.tree.TreeNode( {
        text : '個人資料'
    });
    node1.appendChild(node1Child1);
    node1.appendChild(node1Child2);

    root.appendChild(node1);

    var node2Child1 = new Ext.tree.TreeNode( {
        text : '客戶基本資料查詢維護',
        leaf : 'true'// 是否為末結果,樹葉
    });
    var node2Child2 = new Ext.tree.TreeNode( {
        text : '客戶基本資料列印',
        leaf : 'true'// 是否為末結果,樹葉
    });

    var node2 = new Ext.tree.TreeNode( {
        text : '客戶資料'
    });
    node2.appendChild(node2Child1);
    node2.appendChild(node2Child2);
    root.appendChild(node2);

    var node3Child1 = new Ext.tree.TreeNode( {
        text : '帳號管理作',
        leaf : 'true'// 是否為末結果,樹葉
    });
    var node3Child2 = new Ext.tree.TreeNode( {
        text : '系統參數設定',
        leaf : 'true'// 是否為末結果,樹葉
    });
    var node3Child3 = new Ext.tree.TreeNode( {
        text : '作業選單管理定',
        leaf : 'true'// 是否為末結果,樹葉
    });

    var node3 = new Ext.tree.TreeNode( {
        text : '帳號及系統'
    });
    node3.appendChild(node3Child1);
    node3.appendChild(node3Child2);
    node3.appendChild(node3Child3);
    root.appendChild(node3);

    var node4Child1 = new Ext.tree.TreeNode( {
        text : '批次匯入',
        leaf : 'true'// 是否為末結果,樹葉
    });
    var node4Child2 = new Ext.tree.TreeNode( {
        text : '批次匯出',
        leaf : 'true'// 是否為末結果,樹葉
    });

    var node4 = new Ext.tree.TreeNode( {
        text : '匯入及匯出'
    });
    node4.appendChild(node4Child1);
    node4.appendChild(node4Child2);
    root.appendChild(node4);

    var viewport = new Ext.tree.TreePanel( {

        title : "系統相關",
        width : 200,

        height : 500,
        rootVisible : true,//root結點顯不顯示
        root : root

    });

    viewport.render('toolbar');
    viewport.doLayout();

});

html code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/extensive.css" />
<script type="text/javascript" src="js/ext-base.js"></script>  
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/Menu1.js"></script>
</head>
<body>

<div id="toolbar" ></div>
</body>
</html>

原始碼下載點

範例demo網址

[ExtJS]範例Tree元件的使用Ext.tree.TreePanel

1.直接使用利用腳本來產生樹

2.每一個結點都new一個新物件

One thought to “[ExtJS]範例Tree元件的使用Ext.tree.TreePanel”

發表迴響取消回覆