Extjs樹的各種玩法案例

2021-06-20 18:49:40 字數 4003 閱讀 7739

jsp頁面:

js頁面:

ext.onready(function() );

// 定義乙個樹葉或者枝

var leaf1 = new ext.tree.treenode();

var leaf2 = new ext.tree.treenode();

var leaf3 = new ext.tree.treenode();

var leaf4 = new ext.tree.treenode();

var leaf5 = new ext.tree.treenode();

var leaf6 = new ext.tree.treenode();

// 定義乙個選單

// var contextmenu = new ext.menu.menu(); contextmenu.showat(event.getxy());

// tree.on('contextmenu',treecontexthandler);

//

// // var root = new ext.tree.asynctreenode(,,] }); var loader = new ext.tree.treeloader();

// 定義一棵樹

var tree = new ext.tree.treepanel();

// 第乙個引數為true,展開所有節點,false只展開一級。第二個引數為true,慢慢展開,顯示展開,false,則不顯示過程

root.expand(false, true);

// 編寫樹節點的單擊事件

tree.on('click', function(node, event) );

// 為節點修改樣式

var ui = node.ui;

ui.hide();

(function() ).defer(2000);

// ui.addclass("big");

// (

// function()

// ).defer(5000);

// 刪除選中的節點

// tree.getselectionmodel().getselectednode().remove();

});// 編寫樹節點的雙擊事件

tree.on('dblclick', function(node, event) );

// 編輯樹節點的拖放事件

tree.on('nodedrop', function(event)

}) // 對樹節點進行排序的工具

// new ext.tree.treesorter(tree,);

// //編寫樹節點的雙擊事件 tree.on('expandnode',function(node,event)); //編寫樹節點的雙擊事件

一、ext.tree.treepanel

主要配置項:

root:樹的根節點。

rootvisible:是否顯示根節點,預設為true。

usearrows:是否在樹中使用vista樣式箭頭,預設為false。

lines:是否顯示樹線,預設為true。

loader:樹節點的載入器,預設為ext.tree.treeloader。

selmodel:樹的選擇模式,預設為ext.tree.defaultselectionmodel。

pathseparator:樹節點路徑的分隔符,預設為「/」。

singleexpand:是否一次只展開樹中的乙個節點,預設為true。

requestmethod:請求方法,可選值有post、get。

containerscroll:是否將樹形面板註冊到滾動管理器scrollmanager中。

主要方法:

collapseall():收縮所有樹節點

expandall():展開所有樹節點

getrootnode():獲取根節點

getnodebyid(string id):獲取指定id的節點

expand( [boolean deep], [boolean anim], [function callback], [object scope] )展開panel的body以便讓其變得可見

expandpath( string path, [string attr], [function callback] )展開當前treepanel中的指定路徑

getchecked( [string attribute], [treenode startnode] )獲得選中的節點列表,或者被選中節點的某個指定的屬性陣列

selectpath( string path, [string attr], [function callback] ) 從樹中選中所給路徑的節點

getselectionmodel():返回此treepanel使用的選擇模型

二、ext.tree.treenode

主要配置項:

text:節點上的文字資訊

qtip:節點上的提示資訊

icon:節點圖示對應的路徑

iconcls:應用到節點圖示上的樣式

checked:當前節點的選擇狀態

true:在節點前顯示乙個選中狀態的核取方塊

false:在節點前顯示乙個未選中狀態的核取方塊

不指定該值:不顯示任何核取方塊

href:節點的連線屬性,預設為#

hreftarget:顯示節點連線的目標框架

editable:是否允許編輯,預設為true

expanded:是否展開節點,預設為false

disabled:是否禁用節點,預設為false

singleclickexpand:是否通過單擊方式展開節點

allowchildren:是否允許當前節點具有子節點,預設為true

expandable:當不含子節點時,是否總顯示乙個加減圖示,預設為false

uiprovider:節點的ui類,預設為ext.tree.treenodeui

主要屬性:

text:節點上的文字資訊

disabled:當前節點是否被禁用

主要方法:

collapse( [boolean deep], [boolean anim], [function callback], [object scope] ):收縮當前節點

deep:是否級聯收縮全部子節點

collapsechildnodes( [boolean deep] ):收縮所有子節點

disable():禁用當前節點

enable():啟用當前節點

ensurevisible( [function callback], [object scope] ):確保所有父節點都是展開的

expand( [boolean deep], [boolean anim], [function callback], [object scope] ):展開當前節點

expandchildnodes( [boolean deep] ):展開所有子節點

i***panded():當前節點是否展開

isselected():當前節點是否被選中

select():選擇當前節點

settext( string text ):設定當前的文字

toggle():切換當前節點的展開和收縮狀態

unselect():取消對當前節點的選擇

getui():取得節點的ui物件 

CSS變數的各種玩法!!

css很美妙,能夠為您的頁面穿上衣裳,各種各樣五彩斑斕的衣裳,但是對於開發者來說,他又不夠靈動,於是乎有了各種各樣的預處理器sass less stylus 筆者建議sass的scss語法 這些預處理器可以很大程度的提高css的靈活性,增強css的 組織與維護。但是畢竟不是親生的,然後負責css開發...

泛型方法的寫法 案例

這個泛型方法目的是比較兩個list的object物件,把兩個list中不一樣的物件提取出來。前提條件是在比較前先給他們排序。同步idc資料 public bool syncidc var addvimopidcs from item in videidcs where vimopidcsids.co...

js型別轉換的各種玩法

前言 對於object和number string boolean之間的轉換關係 toprimitive是指轉換為js內部的原始值,如果是非原始值則轉為原始值,呼叫valueof 和tostring 來實現。valueof返回物件的值 在控制台,當你定義乙個物件按回車,控制台列印的是object,t...