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});