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});
<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>
posted on 2015-05-13 17:00 xunianchong 阅读(4823) 评论(0) 编辑 收藏 举报