extjs關(guān)于treePanel+chekBox全部選中以及清空選中問(wèn)題探討
更新時(shí)間:2013年04月02日 15:13:05 作者:
treePanel+chekBox全部選中以及清空選中,想必大家在學(xué)習(xí)使用過(guò)程中都見過(guò)這種效果吧,接下來(lái)為大家詳細(xì)介紹下實(shí)現(xiàn)過(guò)程及細(xì)節(jié),感興趣的朋友可以參考下哈
復(fù)制代碼 代碼如下:
//樹
var treePanel = new Ext.tree.TreePanel({
id:'ptree',
region:'west',
layout:'anchor',
border:false,
rootVisible: false,
root:{},
listeners:{
render: function() {
authorityTree(treePanel); /*渲染樹*/
},
checkchange: function(node, state) {
if (node.parentNode != null) {
//選中子節(jié)點(diǎn)讓相應(yīng)的父節(jié)點(diǎn)選中
var pNode = node.parentNode;
if (state || treePanel.getChecked(id, pNode) == "") {
pNode.ui.toggleCheck(state);// 觸發(fā)父節(jié)點(diǎn)被選中
pNode.attributes.checked = state;
}
}
treeId = node.attributes.id;
treeName = node.attributes.text;
}
}
});
//操作按鈕
tbar: [{
id: 'btnQingKong',
text: '清空',
iconCls: 'winupdate-icon',
handler: function() {
var nodes = Ext.getCmp('ptree').getChecked();
if (nodes && nodes.length) {
for (var i = 0; i < nodes.length; i++) {
//設(shè)置UI狀態(tài)為未選中狀態(tài)
nodes[i].getUI().toggleCheck(false);
//設(shè)置節(jié)點(diǎn)屬性為未選中狀態(tài)
nodes[i].attributes.checked = false;
}
}
}
},{
id: 'btnQuanXuan',
text: '全選',
iconCls: 'winupdate-icon',
handler: function() {
var nodeT = Ext.getCmp('ptree').getRootNode();
treeCheckTrue(nodeT);
}
}]
/**
*checkTree全選
*/
var treeCheckTrue = function(node)
{
node.eachChild(function (child) {
child.getUI().toggleCheck(true);
child.attributes.checked = true;
treeCheckTrue(child);
});
}
/**
*checkTree清空
*/
var treeCheckfalse = function(tree)
{
var nodes = tree.getChecked();
if(nodes && nodes.length){
for(var i=0;i<nodes.length;i++){
//設(shè)置UI狀態(tài)為未選中狀態(tài)
nodes[i].getUI().toggleCheck(false);
//設(shè)置節(jié)點(diǎn)屬性為未選中狀態(tài)
nodes[i].attributes.checked=false;
}
}
}
相關(guān)文章
extjs grid設(shè)置某列背景顏色和字體顏色的實(shí)現(xiàn)方法
extjs grid設(shè)置某列背景顏色和字體顏色的實(shí)現(xiàn)步驟,需要的朋友可以參考下。2010-09-09常用Extjs工具:Extjs.util.Format使用方法
常用Extjs工具:Extjs.util.Format使用方法,需要的朋友可以參考下2012-03-03extjs 學(xué)習(xí)筆記(一) 一些基礎(chǔ)知識(shí)
相信很多人對(duì)使用js進(jìn)行客戶端的編程比較頭大,其實(shí)現(xiàn)在已經(jīng)有了很多優(yōu)秀的js庫(kù),可以大大簡(jiǎn)化js編程的工作量,其中,jquery和extjs就是兩款非常優(yōu)秀的js庫(kù)。2009-10-10Extjs4中的分頁(yè)應(yīng)用結(jié)合前后臺(tái)
本文為大家介紹下Extjs4中的分頁(yè)如何使用且結(jié)合前后臺(tái),具體的示例如下,感興趣的朋友可以參考下2013-12-12學(xué)習(xí)ExtJS TextField常用方法
ExtJS TextField常用方法2009-10-10