ext樹

原創 Y_FQY 2020-02-21 10:19 
[javascript] view plain copy

    <script type="text/javascript">  
            Ext.onReady(function()  
                {  
                    //樹形結構  
                    //創建一棵樹：  
                    var tree = new Ext.tree.TreePanel(  
                        {el:'tree'}//表示渲染的DOM的id.界面中有<div id = "tree"></div>相對應最後這棵樹就出現在這個div位置上  
                    );  
                    //創建根節點：  
                    var root = new Ext.tree.TreeNode({text:'山東'});  
                    tree.setRootNode(root);//把根節點添加到樹中  
                    tree.render();//對樹進行渲染   
                    //添加枝葉  
                    var node1 = new Ext.tree.TreeNode({text:'濟南'});  
                    var node11 = new Ext.tree.TreeNode({text:'市中區'});  
                    var node12 = new Ext.tree.TreeNode({text:'章丘市'});  
                    var node2 = new Ext.tree.TreeNode({text:'青島'});  
                    var node21 = new Ext.tree.TreeNode({text:'黃島區'});  
                    var node22 = new Ext.tree.TreeNode({text:'城陽區'});  
                    var node3 = new Ext.tree.TreeNode({text:'淄博'});  
                    var node31 = new Ext.tree.TreeNode({text:'沂源'});  
                    var node32 = new Ext.tree.TreeNode({text:'張店'});  
                    var node33 = new Ext.tree.TreeNode({text:'博山'});  

                    root.appendChild(node1);  
                    root.appendChild(node2);  
                    root.appendChild(node3);  

                    node1.appendChild(node11);  
                    node1.appendChild(node12);  

                    node2.appendChild(node21);  
                    node2.appendChild(node22);  

                    node3.appendChild(node31);  
                    node3.appendChild(node32);  
                    node3.appendChild(node33);  

                    root.expand(true,true);//加載後立即展開樹  
                }  
            );  
        </script>

這裏寫圖片描述

<2>使用TreeLoader加載數據：

[javascript] view plain copy

    <html>  
        <head>  
            <meta http-equiv="Content-Type" content="text/html; charset=GB2312">  
            <title>Tree</title>  
            <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />  
            <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>  
            <script type="text/javascript" src="../../ext-all.js"></script>  
            <script type="text/javascript" src="localXHR.js"></script>  
            <script type="text/javascript">  
                Ext.onReady(function(){  
                    var tree = new Ext.tree.TreePanel(  
                        {  
                            el: 'tree',  
                            //TreeLoader完成數據轉換和裝配節點的功能  
                            loader: new Ext.tree.TreeLoader({dataUrl: '03-03.txt'})  
                        }  
                    );  
                    //Ext.tree.TreeNode換成Ext.tree.AsyncTreeNode實現異步加載效果  
                    var root = new Ext.tree.AsyncTreeNode({text:'CHINA'});   
                    tree.setRootNode(root);  
                    tree.render();  
                    //只展開第一層節點  
                    root.expand();  
                    //展開全部節點  
                    //root.expand(true,true);  
                }  
            );  
            </script>  
        </head>  
        <body>  
            <script type="text/javascript" src="../shared/examples.js"></script>  
            <div id="tree" style="height:300px;"></div>  
        </body>  
    </html>

03-03.txt

[javascript] view plain copy

    [  
        {  
            text:'SHANDONG',  
            children:[  
                {text:'QINGDAO',leaf:true},  
                {  
                    text:'ZIBO',  
                    children:[  
                        {text:'ZHANGDIAN',leaf:true},  
                        {text:'YIYUAN',leaf:true}  
                    ]  
                },  
                {text:'JINAN',leaf:true}  
            ]  
        },  
        {text:'BEIJING',leaf:true}  
    ]

注意：

下載localXHR.js：點擊打開鏈接

這裏寫圖片描述
<3>樹的事件

[javascript] view plain copy

    //添加事件監聽機制  
                    tree.on("expandnode",function(node){  
                        Ext.Msg.alert(node + "展開了");  
                    });  
                    tree.on("collapsenode",function(node){  
                        Ext.Msg.alert(node + "摺疊了");  
                    });  
                    tree.on("click",function(node){  
                        Ext.Msg.alert("你單擊了" + node);  
                    });  
                    tree.on("dblclick",function(node){  
                        Ext.Msg.alert("你雙擊了" + node);  
                    });

alert() 無法觸發雙擊事件。

這裏寫圖片描述
<4>右鍵菜單

[javascript] view plain copy

    <html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
        <title>Ext Buttons</title>  
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>  
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>  
        <script type="text/javascript" src="../../ext-all.js"></script>  
        <script type="text/javascript" src="../examples.js"></script>  
        <script type="text/javascript">  
            Ext.onReady(function()  
                {  
                    //樹形結構  
                    //創建一棵樹：  
                    var tree = new Ext.tree.TreePanel(  
                        {el:'tree'}//表示渲染的DOM的id.界面中有<div id = "tree"></div>相對應最後這棵樹就出現在這個div位置上  
                    );  
                    //創建根節點：  
                    var root = new Ext.tree.TreeNode({text:'山東'});  
                    tree.setRootNode(root);//把根節點添加到樹中  
                    tree.render();//對樹進行渲染   
                    //添加枝葉  
                    var node1 = new Ext.tree.TreeNode({text:'濟南'});  
                    var node11 = new Ext.tree.TreeNode({text:'市中區'});  
                    var node12 = new Ext.tree.TreeNode({text:'章丘市'});  
                    var node2 = new Ext.tree.TreeNode({text:'青島'});  
                    var node21 = new Ext.tree.TreeNode({text:'黃島區'});  
                    var node22 = new Ext.tree.TreeNode({text:'城陽區'});  
                    var node3 = new Ext.tree.TreeNode({text:'淄博'});  
                    var node31 = new Ext.tree.TreeNode({text:'沂源'});  
                    var node32 = new Ext.tree.TreeNode({text:'張店'});  
                    var node33 = new Ext.tree.TreeNode({text:'博山'});  

                    root.appendChild(node1);  
                    root.appendChild(node2);  
                    root.appendChild(node3);  

                    node1.appendChild(node11);  
                    node1.appendChild(node12);  

                    node2.appendChild(node21);  
                    node2.appendChild(node22);  

                    node3.appendChild(node31);  
                    node3.appendChild(node32);  
                    node3.appendChild(node33);  
                    //<1>製作自定義菜單  
                    var contextmenu = new Ext.menu.Menu(  
                        {  
                            id:'theContextMenu',  
                            items:[  
                                {  
                                    text:'添加',  
                                    handler:function(){  
                                        alert("還未實現添加功能");  
                                    }  
                                },  
                                {  
                                    text:'刪除',  
                                    handler:function(){  
                                        alert("還未實現刪除功能");  
                                    }  
                                },  
                                {  
                                    text:'修改',  
                                    handler:function(){  
                                        alert("還未實現修改功能");  
                                    }  
                                }  
                            ]  
                        }  
                    );  
                    //<2>綁定contextMenu事件  
                    tree.on('contextMenu',function(node,e){  
                        //防止瀏覽器彈出他默認的功能菜單  
                        e.preventDefault();  
                        //選中當前節點  
                        node.select();  
                        //在點擊的位置彈出菜單  
                        contextmenu.showAt(e.getXY());  
                    });  
                }  
            );  
        </script>  
    </head>  
    <body>  
        <div id = "tree">  
        </div>  
    </body>  
    </html>

這裏寫圖片描述

<5>修改節點的默認圖標

[javascript] view plain copy

    <html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
        <title>Ext Buttons</title>  
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>  
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>  
        <script type="text/javascript" src="../../ext-all.js"></script>  
        <script type="text/javascript" src="../examples.js"></script>  
        <style type="text/css">  
            .x-tree-node-leaf .icon-male {  
                background-image: url(user_male.png)  
        }  
        </style>  
        <script type="text/javascript">  
            /* 
                每個樹形結點都有icon和iconCls屬性，他們負責指定結點的圖標。 
                <1>使用icon屬性： 
                    var node = new Ext.tree.TreeNode({text:'淄博',icon:'user_female.png'}); 
                <2>使用iconCls屬性，我們還需要在HTML中添加對應的CSS定義。 
                    var node = new Ext.tree.TreeNode({text:'淄博',iconCls:'icon-male'}); 
                    <style type="text/css"> 
                        .x-tree-node-leaf .icon-male { 
                            background-image: url(user_male.png) 
                    } 
                    注意：x-tree-node-leaf .icon-male和代碼中iconCls:'icon-male'相對應。 

        </style> 
            */  
            Ext.onReady(function()  
                {  
                    //樹形結構  
                    //創建一棵樹：  
                    var tree = new Ext.tree.TreePanel(  
                        {el:'tree'}//表示渲染的DOM的id.界面中有<div id = "tree"></div>相對應最後這棵樹就出現在這個div位置上  
                    );  
                    //創建根節點：  
                    var root = new Ext.tree.TreeNode({text:'山東',icon:'user_male.png'});  
                    tree.setRootNode(root);//把根節點添加到樹中  
                    tree.render();//對樹進行渲染   
                    //添加枝葉  
                    var node3 = new Ext.tree.TreeNode({text:'淄博',icon:'user_female.png'});  
                    var node31 = new Ext.tree.TreeNode({text:'沂源',icon:'user_female.png'});  
                    var node32 = new Ext.tree.TreeNode({text:'張店',icon:'user_female.png'});  
                    var node33 = new Ext.tree.TreeNode({text:'博山',iconCls:'icon-male'});  

                    root.appendChild(node3);  

                    node3.appendChild(node31);  
                    node3.appendChild(node32);  
                    node3.appendChild(node33);  
                }  
            );  
        </script>  
    </head>  
    <body>  
        <div id = "tree">  
        </div>  
    </body>  
    </html>

這裏寫圖片描述

<6>從節點彈出對話框

[javascript] view plain copy

    tree.on('click',function(node){  
                        Ext.Msg.show(  
                            {  
                                title:'提示',  
                                msg:'你點擊了'+node,  
                                animEl:node.ui.textNode  
                            }  
                        );  
                    });

這裏寫圖片描述

<7>節點提示信息

[javascript] view plain copy

    <html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
        <title>Ext Buttons</title>  
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>  
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>  
        <script type="text/javascript" src="../../ext-all.js"></script>  
        <script type="text/javascript" src="../examples.js"></script>  
        <script type="text/javascript">  

            /* 
                爲每個節點添加qtip:'xxxx'屬性。 
                在JavaScript中對Ext的提示功能進行初始化。Ext.QuickTips.init(); 
            */  
            Ext.onReady(function()  
                {  
                    Ext.QuickTips.init();  
                    //樹形結構  
                    //創建一棵樹：  
                    var tree = new Ext.tree.TreePanel(  
                        {el:'tree'}//表示渲染的DOM的id.界面中有<div id = "tree"></div>相對應最後這棵樹就出現在這個div位置上  
                    );  
                    //創建根節點：  
                    var root = new Ext.tree.TreeNode({text:'山東'});  
                    tree.setRootNode(root);//把根節點添加到樹中  
                    tree.render();//對樹進行渲染   
                    //添加枝葉  
                    var node3 = new Ext.tree.TreeNode({text:'淄博',qtip:'中國歷史文化名城，國家園林城市，中國瓷都。歷史文化源遠流長，曾作爲山東政治中心近兩千年，有“齊國故都”之稱'});  
                    var node31 = new Ext.tree.TreeNode({text:'沂源',qtip:'沂源縣是山東古人類發源地、山東屋脊生態高地、中國北方溶洞之鄉和牛郎織女之鄉'});  
                    var node32 = new Ext.tree.TreeNode({text:'張店'});  
                    var node33 = new Ext.tree.TreeNode({text:'博山'});  

                    root.appendChild(node3);  

                    node3.appendChild(node31);  
                    node3.appendChild(node32);  
                    node3.appendChild(node33);  
                }  
            );  
        </script>  
    </head>  
    <body>  
        <div id = "tree">  
        </div>  
    </body>  
    </html>

這裏寫圖片描述

<8>爲節點設置超鏈接

[javascript] view plain copy

    var node32 = new Ext.tree.TreeNode({text:'張店',href:'tree事件監聽.html',hrefTarget:'_blank'});

<9>直接修改樹節點名稱

[javascript] view plain copy

    //只要創建一個TreeEditor，再把TreePanel放進去就可以了。  
                    var treeEditor = new Ext.tree.TreeEditor(tree,{  
                        allowBlank:false  
                    });

這裏寫圖片描述

Y_FQY
發佈了20 篇原創文章 · 獲贊 7 · 訪問量 3萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

開源十年，AOSuite 開發平臺停止維護 [EOL]

AOSuite 是我在 2006 - 2016 年間開發和維護的一節開源項目。那還是一個 jQuery UI 和 ExtJS 橫行的年代。現在想來還滿滿都是回憶。隨着前端技術的發展和後端微服務技術的流行，AOSuite 到了該退場的時候了。

原創 2022-12-24 22:05:18

解決ExtJS在chrome或火狐中正常顯示，但是在ie中不顯示的問題

解決ExtJS在chrome或火狐中正常顯示，但是在ie中不顯示的問題 參考文章： （1）解決ExtJS在chrome或火狐中正常顯示，但是在ie中不顯示的問題 （2）https://www.cnblogs.com/yuezk/archi

技術盛宴 2021-05-23 21:27:40

ExtJs的Grid常用功能說明

1、Ext.grid.GridPanel 主要配置項： store：表格的數據集 columns：表格列模式的配置數組，可自動創建ColumnModel列模式 autoExpandColumn：自動充滿表格未用空間的列，參數爲列id，該id

原創 2021-03-22 21:31:23

EXTJS4 MVC模式筆記

工作筆記 //var cnr = this.application.getController("DeviceInfoController");//

denghua10 2020-07-07 16:47:49

EXTJS grid中顯示Date timestamp等多種類型改造方法 實用所有數據類型轉換

EXTJS的JSON數據轉換，也就是使用到了json-lib包，當時間格式傳遞到前臺的時候出現類似結構： {"date":21,"day":1,"hours":23,"minutes":39,"month":11,"nanos":0,"

denghua10 2020-07-07 16:47:49

Extjs4 grid selectChange多次觸發問題

Extjs4 grid selectChange事件 在grid中 關閉後重新打開會多次觸發事件，可以換成cellclick事件。

denghua10 2020-07-07 16:47:39

EXTJS4.0 gridpanel 用法筆記～～簡單的創建grid

1.創建一個model     Ext.define('model', { extend : 'Ext.data.Model', fields : [ { name : 'NAME', type : 'string' }, { name 

zhangzhida163 2020-07-07 11:33:34

Ext開發代碼片段蒐集

1.  表格數據加載後默認選中第一條    可以在表格的render 添加如下監聽事件   listeners : { 'render':function(){ var _grid = Ext.getCmp(

arron168 2020-07-07 09:11:27

MyEclipse安裝Ext JS和jQuery自動提示功能

對於目前的MyEclipse的插件安裝是很簡單的，把spket1.6.18破解版.zip解壓後直接複製到MyEclipse安裝目錄的dropins文件夾下即可。如圖：   安裝完成後，啓動MyEclipse，打開window—Pre

zzq58157383 2020-07-06 11:57:36

extjs前臺把一個actioncolumn按鈕放大 並且居中的操作

.light-yellow {     background-image: url('../img/icon-big/greenlight.png')  ;background-position:center;height:66px;wi

死狗等夜狼 2020-07-06 10:36:38

EXTjs常用的組件方法

知乎文章百度搜索不到 還是回到csdn把 自己搭博客又太麻煩 看了白鶴extjs視頻學習資料後整理一下 以後用的時候看看 1 選擇器時 1 btn.up()/down().屬性 參數是選擇器或者組件的xtype 2 Ext.getCmp(

死狗等夜狼 2020-07-06 10:36:38

哪些可以找到很多開發用的圖標

coolite toolkit 是什麼玩意？   Coolite Toolkit 簡介 Coolite Toolkit 是一個支持ASP.NET AJAX的Web控件 Coolite Toolkit是基於跨瀏覽器的ExtJS 庫開發而

rolandluo 2020-07-06 03:13:38

配置ExtJS的開發調試環境

這裏需要好好總結一下，折騰了兩天弄這個開發環境。之前已經搭建過一套，但是人是而物非了，和之前還是有很多不一樣的地方。這裏要狠狠的mark一下。   開發工具 PDT（eclipse）+ Zend 下載一個省事的包 all-in-one 的

rolandluo 2020-07-06 03:13:38

extjs設置爲disable後表單無法提交參數到後臺的問題

今天發現某個輸入框設置field.disable();後，即使提交時有設置field的值，但這個值也無法提交到後臺。到網絡上搜索下了，另外發現一篇文章，作爲以後的參考： --原文地址：http://blog.csdn.net/serena

beiguofengguang 2020-07-05 05:25:57

extjs4.02頁面靜置一段時間後報events爲空錯誤的原因

原因是引入了ext-all 和 bootstrap兩個文件，將ext-all刪除就好了！

ijackson 2020-07-05 03:39:53