第十二講：ExtJS元件之TreePanel(下)
示例一：樹的一些常用配置屬性。
|
Ext.onReady(function(){ var loader=new Ext.tree.TreeLoader({ url:"treedata3.js" }); var root=new Ext.tree.TreeNode({ id:"root", text:"根節點" }); root.appendChild(new Ext.tree.TreeNode({ id:"child1", text:"子節點1" })) root.appendChild( id:"child2", text:"子節點2", loader:loader })) var tree=new Ext.tree.TreePanel({ renderTo:"TestTree", root:root, width:400, height:400, animate:false,//收縮動畫 autoHeight:true, //自動高度 enableDrag:true, //是否可以拖動 //enableDD:true, //drap和drop enableDrop:true, //放置節點 lines:false,//節點間虛線 rootVisible:false,//是否顯示根節點 trackMouseOver:true,//是否顯示經過時效果 useArrows:true//是否使用小箭頭 }); }) |
示例二：節點的一些常用配置屬性。
|
Ext.onReady(function(){ Ext.QuickTips.init(); var loader=new Ext.tree.TreeLoader({ url:"treedata3.js" }); var root=new Ext.tree.TreeNode({ id:"root", text:"根節點", checked:true, //true則在text前有個選中的複選框,false則text前有個未選中的複選框,預設沒有任何框框 expanded:true, //是否展開 qtip:"根節點", //提示資訊 singleClickExpand:true //單擊文字展開 }); root.appendChild(new Ext.tree.TreeNode({ id:"child1", text:"子節點1" })) root.appendChild(new Ext.tree.AsyncTreeNode({ id:"child2", text:"子節點2", loader:loader })) var tree=new Ext.tree.TreePanel({ renderTo:"TestTree", root:root, width:400, height:400 }); }) |
示例三：從JSP中獲得資料並構造動態樹。
|
Ext.onReady(function(){ //根節點 var root = new Ext.tree.AsyncTreeNode({ id:"root", text:"根節點", loader:new Ext.tree.TreeLoader({ url:"AsyncServer2.jsp" }) }) var treePanel = new Ext.tree.TreePanel({ renderTo:"AsyncTree", width:300, height:400, root:root }) }) |
|
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String tree = "[{id:'childnode1',text:'子節點',leaf:false}]"; response.getWriter().write(tree); %> |
|
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% StringBuffer tree = new StringBuffer(); tree.append("["); tree.append("{text:'子節點1',id:'son1',leaf:true},"); tree.append("{text:'子節點2',id:'son2',leaf:true},"); tree.append("{text:'子節點3',id:'son3',leaf:true}"); tree.append("]"); response.getWriter().write(tree.toString()); %> |
示例四：TreeSelectionModel選擇模型。
|
Ext.onReady(function(){ //根節點 var root = new Ext.tree.TreeNode({ id:"root", text:"根節點" }) //子節點 var childNode1 = new Ext.tree.TreeNode({ id:"chileNode1", text:"子節點1" }) //孫子節點 var gChildNode1 = new Ext.tree.TreeNode({ id:"gChildNode1", text:"孫子節點1" }) //孫子節點 var gChildNode2 = new Ext.tree.TreeNode({ id:"gChildNode2", text:"孫子節點2" }) //孫子節點 var gChildNode3 = new Ext.tree.TreeNode({ id:"gChildNode3", text:"孫子節點3" }) childNode1.appendChild(gChildNode1); childNode1.appendChild(gChildNode2); childNode1.appendChild(gChildNode3); //子節點 var childNode2 = new Ext.tree.TreeNode({ id:"chileNode2", text:"子節點2" }) //子節點 var childNode3 = new Ext.tree.TreeNode({ id:"chileNode3", text:"子節點3" }) root.appendChild(childNode1); root.appendChild(childNode2); root.appendChild(childNode3); var treePanel = new Ext.tree.TreePanel({ renderTo:"TestTree11", width:300, height:400, root:root, bbar:[ { text:"獲得選擇的節點", handler:function(){ var sm = treePanel.getSelectionModel(); var sn = sm.getSelectedNode(); if(sn != null) { alert(sn.text); }else { alert("沒有選擇任何節點"); } } } ] }) }) |
示例五：選擇多個節點。
|
Ext.onReady(function(){ //根節點 var root = new Ext.tree.TreeNode({ id:"root", text:"根節點" }) //子節點 var childNode1 = new Ext.tree.TreeNode({ id:"chileNode1", text:"子節點1" }) //孫子節點 var gChildNode1 = new Ext.tree.TreeNode({ id:"gChildNode1", text:"孫子節點1" }) //孫子節點 var gChildNode2 = new Ext.tree.TreeNode({ id:"gChildNode2", text:"孫子節點2" }) //孫子節點 var gChildNode3 = new Ext.tree.TreeNode({ id:"gChildNode3", text:"孫子節點3" }) childNode1.appendChild(gChildNode1); childNode1.appendChild(gChildNode2); childNode1.appendChild(gChildNode3); //子節點 var childNode2 = new Ext.tree.TreeNode({ id:"chileNode2", text:"子節點2" }) //子節點 var childNode3 = new Ext.tree.TreeNode({ id:"chileNode3", text:"子節點3" }) root.appendChild(childNode1); root.appendChild(childNode2); root.appendChild(childNode3); var treePanel = new Ext.tree.TreePanel({ renderTo:"TestTree11", width:300, height:400, root:root, selModel : new Ext.tree.MultiSelectionModel(), bbar:[ { text:"獲得選擇的節點", handler:function(){ var sm = treePanel.getSelectionModel(); var sn = sm.getSelectedNodes(); var length = sn.length; if(length != 0) { alert(length); }else { alert("沒有選擇任何節點"); } } } ] }) }) |
示例六：可編輯的樹。
|
new Ext.tree.TreeEditor(treePanel); |
示例七：按指定屬性進行排序。
|
new Ext.tree.TreeSorter(treePanel,{ property:"id" }) |
示例八：替換Tree中圖片。
|
Ext.onReady(function(){ //根節點 var root = new Ext.tree.TreeNode({ id:"root", text:"根節點", icon:"folder.jpg" }) root.on("click",function(){ root.getUI().getIconEl().src="folder2.jpg" }); //子節點 var childNode1 = new Ext.tree.TreeNode({ id:"chileNode1", text:"子節點1", icon:"folder.jpg" }) //孫子節點 var gChildNode1 = new Ext.tree.TreeNode({ id:"gChildNode1", text:"孫子節點1", icon:"folder.jpg" }) //孫子節點 var gChildNode2 = new Ext.tree.TreeNode({ id:"gChildNode2", text:"孫子節點2", icon:"folder.jpg" }) //孫子節點 var gChildNode3 = new Ext.tree.TreeNode({ id:"gChildNode3", text:"孫子節點3", icon:"folder.jpg" }) childNode1.appendChild(gChildNode1); childNode1.appendChild(gChildNode2); childNode1.appendChild(gChildNode3); //子節點 var childNode2 = new Ext.tree.TreeNode({ id:"chileNode3", text:"子節點2" }) //子節點 var childNode3 = new Ext.tree.TreeNode({ id:"chileNode2", text:"子節點3" }) root.appendChild(childNode1); root.appendChild(childNode2); root.appendChild(childNode3); var treePanel = new Ext.tree.TreePanel({ renderTo:"TestTree11", width:300, height:400, root:root, selModel : new Ext.tree.MultiSelectionModel(), bbar:[ { text:"獲得選擇的節點", handler:function(){ var sm = treePanel.getSelectionModel(); var sn = sm.getSelectedNodes(); var length = sn.length; if(length != 0) { alert(length); }else { alert("沒有選擇任何節點"); } } } ] }); new Ext.tree.TreeSorter(treePanel,{ property:"id" }) }) |
相關推薦
第十二講：ExtJS元件之TreePanel(下)
示例一：樹的一些常用配置屬性。 Ext.onReady(function(){ var loader=new Ext.tree.TreeLoader({ url:"treedata3.js" }); var roo
學習筆記-小甲魚Python3學習第十二講：一個打了激素的數組3
!= 查找 lse pre 表達 如果 eof ssh 連接 列表的一些常用操作符：比較操作符、邏輯操作符、連接操作符、重復操作符、成員關系操作符比較操作符：>>> list1 = [123,456]>>> list2 = [234,12
第十二講：12，spring宣告式事務管理-註解式
1，複製專案spring404 ，改名spring404-3。修改BankServiceImpl類，添加註解，package com.cruise.service.impl;import org.springframework.transaction.annotation.Tra
第十二篇：Spring Boot之使用Spring RestTemplate訪問Rest服務
RestTemplate是Spring3.0後開始提供的用於訪問 Rest 服務的輕量級客戶端，相較於傳統的HttpURLConnection、Apache HttpClient、OkHttp等框架，RestTemplate大大簡化了發起HTTP請求以及處理響應的過程。這篇文章主要介紹怎
【2017CS231n】第十二講：視覺化和理解卷積神經網路
一.特徵視覺化1.1理解神將網路的層 下面我們瞭解一下神經網路內部發生了什麼。第一層：第一個卷積層由一個卷積核組成 在AlexNet中第一個卷積層由許多卷積核組成，每個卷積核的形狀是3*11*11，卷積核在影象上來回滑動，我們取影象塊和卷積核權重的內積，這就是第一
名詞解釋第七十二講：軟分叉
這裡是王團長區塊鏈學院，與最優秀的區塊鏈人一起成長！今天給大家講講軟分叉。 區塊鏈上節點眾多，當出現新版軟體後，不一定所有的節點都願意升級，也不一定所有的節點都能馬上反應過來。節點面對新版軟體反應的不同，造成的分叉結果也不同。 根據升級後的區塊鏈是否能相容
Android中級第十二講之DNS問題
網路請求經過客戶端請求，傳送資料包、代理（轉發）、隧道（通道）、閘道器（DNS），最終到伺服器。我們都知道網址要通過DNS解析成IP才能到達伺服器，也就說IP變化其實到達的是不同的伺服器；而這裡就涉及到三個問題，第一DNS怎樣解析為IP，第二怎樣防止IP被篡改，第
Introduction to 3D Game Programming with DirectX 12 學習筆記之 --- 第十二章：幾何著色器（The Geometry Shader）
enable 中心 functions vector 是我 符號 ref rect 可能 原文:Introduction to 3D Game Programming with DirectX 12 學習筆記之 --- 第十二章：幾何著色器（The Geometry Sha
Ng第十二課：支持向量機(Support Vector Machines)（二）
.com htm 條件 hid cti 無法 技術 add 效果 7 核函數（Kernels） 考慮我們最初在“線性回歸”中提出的問題，特征是房子的面積x，這裏的x是實數，結果y是房子的價格。假設我們從樣本點的分布中看到x和y符合3次曲線，那麽我們希望使用x的三次多項式來逼
第十二章：查找與處理文件
路徑 完整 管理員 arc 數據庫 保存 查詢 執行 處理 目標 使用 locate 使用 find 使用 Gnome Search tool locate 基於預先定義的數據庫定義，這個數據庫保存了所有文件的路徑和權限 非實時查詢
ABP module-zero +AdminLTE+Bootstrap Table+jQuery權限管理系統第十二節--小結,Bootstrap Table之角色管理
增刪 習慣 etc 根據 很好 這不 update 必須 virtual 返回總目錄:ABP+AdminLTE+Bootstrap Table權限管理系統一期 很多人說ABP不適合高並發大型,有一定的道理,但是我覺得還是可以的,就看架構師的能
第十二篇：HTML基礎
項目 logs 瀏覽器 圖片 handle 標題欄 width light 標題 本篇內容 HTML概述 HTML常用基本標簽 CSS格式引入 一、 HTML概述 1.定義： HTML，超文本標記語言，寫給瀏覽器的語言，目前網絡上應用最廣泛的語言。HTML也在不斷
第十二章： 類的無參方法
使用方法 成員變量和局部變量 必須 技術 sun公司 語句 步驟 語法規則 前綴 第十二章： 類的無參方法 類 定義類的方法 類的方法必須包括：1.方法名稱 2.方法返回值
第十二篇：數據庫操作
mysq 查詢 alc mys clas 多對多 class 操作 連接查詢 一、數據庫簡紹 二、mysql 增刪改查 三、mysql 外鍵關聯 四、mysql 連接查詢 五、mysql 事務與索引 六、ORM 簡紹 七、sqlalchemy 常用語法 八、sqlalche
進階第十二課 Python模塊之sys
read OS python模塊 leg gac pack uil file pos sys是與Python解釋器交互的工具。 先看下dir(sys) >>> import sys >>> dir(sys) [‘__displayhoo
第十二篇 Python函數之全局變量&局部變量&遞歸函數
量變 錯誤 總結 bsp code 類型 hang qup 說明 全局變量：在定義的時候，頂頭寫的，沒有任何縮進的變量就是全局變量。 全局變量的特點：在當前文件裏的任何地方都可以進行調用 局部變量：在子程序裏定義的變量，就是局部變量。 子程序：比如.py文件裏，寫的函數就是
專升本第十二講 （音影娛樂）
編碼 英文 離散 計算機 時間間隔 數據表 存儲格式 高質量 很多 多媒體信息 計算機除了能存儲、處理文字（數值和字符）外，還需要處理大量的圖形、圖像、音頻、視頻等多媒體的信息。這些多媒體信息雖然表現形式不相同，但在計算機中同樣都是以0和1二進制表示的，這就需要對各種媒
python學習第十二天：閉包函數與裝飾器
源代碼 -s 為什麽 pre def func stop 修改 rom 閉包函數： 什麽是閉包函數： 閉指的是定義在一個函數內部 包指的是該函數包含對外部作用域（非全局作用域）名字的引用 def counter(): n=0 d
第十二章： 部署Django
iter 細節 rep 控制 warning 創建 mes 性問題 pri 本章包含創建一個django程序最必不可少的步驟 在服務器上部署它 如果你一直跟著我們的例子做，你可能正在用runserver 但是runserver 要部署你的django程序，
史上最簡單的SpringCloud教程 ｜ 第十二篇： 斷路器監控(Hystrix Dashboard)
詳細 pre 良好的 依次 alt ews 需要 ext 數據監控 最新Finchley版本，請訪問：https://www.fangzhipeng.com/springcloud/2018/08/30/sc-f12-dash/或者http://blog.csdn.net