extjs4.0 treepanel节点的选中、展开！ 数据的重新加载! checked树

1.extjs4.0API较3.0有非常大变化

2.多级子父节点的选中和展开。

3.数据的重新加载。tree.getStore().load

4.节点的移除,从树中根据ID获取节点 tree.getStore().getNodeById();

5.获取选中的节点,tree.getView().getChecked();

6.数据为异步加载,设置节点选中,tree.getStore().getNodeById('').set({checked:true});

<script type="text/javascript">
Ext.require([
'Ext.tree.*',
'Ext.data.*',
'Ext.window.MessageBox',
'Ext.tip.*'
]);
Ext.onReady(function() {
/*
* 可以获取选中节点的ID，以及TEXT
*
*/
var checkedNodes = {
_data:{},
update:function(id,text,checked){
if(checked){
this.add(id,text,checked);
}else if(!checked){
this.delById(id);
}
},
add: function(id,text){
if(!this._data[id]){
this._data[id] = {'id':id,'text':text};
}
},
delById:function(id){
if(this._data[id]){
delete this._data[id];
}
},
getById:function(id){
return this._data[id];
},
joinId:function(sep){
arr = [];
for(id in this._data){
arr.push(id);
}
return arr.join(sep);
},
joinName:function(sep){
arr = [];
for(id in this._data){
arr.push(this._data[id].text);
}
return arr.join(sep)
},
contains:function(id){
return this_data[id];
},
init:function(ids,texts){
if(ids.IndexOf(',') > 1){
idarr = ids.split(',');
textarr = texts.splist(',');
for(var i=0; i<idarr.length; i++){
if(idarr[i].replace(/^\s+|\s+$/g,'') != ''){
this.add(idarr[i],textarr[i]);
}
}
}
}
};
Ext.define('OrgInfo', {extend: 'Ext.data.Model',
fields: [
{name: 'id'},
{name: 'text'},
{name: 'name'}
]
});
var orgStore = Ext.create('Ext.data.TreeStore', {
defaultRootId: "10",
model: "OrgInfo",
root: {id:10,text:'顺丰速运集团',leaf:false},
proxy: {type:'ajax', actionMethods : "POST", url:'tree_data.jsp', reader:{type:'json'}},
nodeParam:'id',
textField : "name"
});
/*
*设置子节点或者父节点选中的方法
*设置单个节点选中的方法
*/
var TreeNodeCheck ={
setNodeChecked:function(node,checked){
checkedNodes.update(node.get('id'),node.get('text'),checked);
node.set('checked',checked);
},
childChecked:function(node,checked){
TreeNodeCheck.setNodeChecked(node,checked);
node.expand();
if(node.hasChildNodes()){
node.eachChild(function(child) {
TreeNodeCheck.childChecked(child,checked);
});
}
},
parentChecked:function(node,checked){
var parentNode = node.parentNode;
checked = parentNode == null ?null:checked;
TreeNodeCheck.setNodeChecked(node,checked); //设置父节点不选 中
if(parentNode !=null){ //如果父节点不为空则展开
var flag = false;
parentNode.eachChild(function(child) {
if(child.data.checked == true){
flag = true;
}
});
if(checked == false){
if(!flag){
TreeNodeCheck.parentChecked(parentNode,checked);
}
}else{
if(flag){
TreeNodeCheck.parentChecked(parentNode,checked);
}
}
}

}
};
Ext.define("OrgTreePanel", {
extend: "Ext.tree.Panel",
store : orgStore,
rootVisible: true,
useArrows: true,
frame: true,
title: 'Check Tree',
width: 200,
height: 250,
padding:'0 0 0 0',
selectIds:function(){
var records =this.getView().getChecked(),
ids = [];
Ext.Array.each(records, function(rec){
ids.push(rec.get('id'));
});
return ids.join(",");
},
listeners:{
checkchange:function (node,checked,eOpts){
TreeNodeCheck.childChecked(node,checked);
TreeNodeCheck.parentChecked(node,checked);

},
load:function( store,  records,  successful,  operation,  eOpts ){
if(records.data.checked!=null){
var hasChecked = false;
Ext.Array.each(successful, function(rec){
if(rec.data.checked){
hasChecked = true;
return false;
}
});
if(!records.data.checked){
if(hasChecked){
Ext.Array.each(successful, function(rec){
TreeNodeCheck.childChecked(rec,false);
});
}
}else{
if(!hasChecked){
Ext.Array.each(successful, function(rec){
TreeNodeCheck.childChecked(rec,true);
});
}
}
}
}
}
});

var win = null;
var tree = null;

Ext.create('Ext.Button', {
text: '得到被选中的节点',
renderTo: Ext.getBody(),
handler: function() {

console.info(Ext.isEmpty(' '));
console.info("checkedNodes.joinId:"+checkedNodes.joinId("-"));

}
});

Ext.create('Ext.Button', {
text: 'delete tree',
renderTo: Ext.getBody(),
handler: function() {
tree.getRootNode().removeAll(false);
tree.getStore().load();
}
});

win = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 250,
width: 400,
layout: 'fit',
closeAction :'hide',
showWin:function(){
this.show();
tree.getRootNode().removeAll(false);
tree.getStore().load({
scope :this,
callback: function(records, operation, success) {
if(!tree.getRootNode().isExpanded()){
tree.getRootNode().expand();
}
}
});
},
initComponent: function () {//构造函数
var me = this;
tree = Ext.create("OrgTreePanel");
me.items = [tree];
me.superclass.initComponent.call(me);
},
listeners: {
beforehide:function(win, eOpts ){

}
}
});

Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
win.showWin();
}
});
});
</script>

extjs4.0 treepanel节点的选中、展开！ 数据的重新加载

1.extjs4.0API较3.0有非常大变化

2.多级子父节点的选中和展开。

3.数据的重新加载。tree.getStore().load

4.节点的移除,从树中根据ID获取节点 tree.getStore().getNodeById();

5.获取选中的节点,tree.getView().getChecked();

6.数据为异步加载,设置节点选中,tree.getStore().getNodeById('').set({checked:true});