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>