Tree

1. 类结构
    Ext.panel.Panel
        Ext.panel.Table
            Ext.tree.Panel --- 他是和grid完全一样的

2. 主要配置项
        title 标题
        width 宽
        height 高
        renderTo 渲染到什么地方
        root 控制根节点(Ext.data.Model/Ext.data.NodeInterface)
        animate : Boolean 控制收起和展开是发有动画效果
        store: store 数据集合
        rootVisible : false,//控制显隐的属性
    重要事件
        itemclick:function(tree,record,item,index,e,options)
    重要方法
        expandAll
        collapseAll
        getChecked
        appendChild    
        
3. Ext.data.TreeStore
    重要属性
        defaultRoodId  //指定根节点

4. 树形的拖拽（插件）
    Ext.tree.ViewDDPlugin
        alias ：'plugin.treeviewdragdrop'
    需要在tree的panel下面加
        viewConfig:{
            plugins:{
                ptype :'treeviewdragdrop',
                appendOnly:true //加上这个叶子节点之间拖拽时，会弹出图形警告。
            }
        }    
    事件
        listeners:{
            drop: function(HtmlElement node, Object data, Ext.data.Model overModel, String dropPosition)
            beforedrop: function(HtmlElement node, Object data, Ext.data.Model overModel, String dropPosition, Function dropFunction)
        }

5. 关于节点的拷贝与粘贴
         重要方法
              updateInfo（把更新的节点属性值，更新显示的界面）

6. 关于删除节点操作
        重要方法
             remove（节点的方法）
        
7. 多列树的配置
         主要配置项
              columns（与表格一样）

8. 级联选中，以及级联不选中

9. 关于Store的Proxy里的api应用

Ext.define("AM.store.deptStore",{
 extend:'Ext.data.TreeStore',
 defaultRoodId:'root',
 proxy:{
  //Proxy里面的api属性，可以存放crud的后台url，通过前台就可以取到
  api:{
   update:"/extjs/extjs!updateDept.action",
   remove:"/extjs/extjs!delDept.action"
  }
  type:'ajax',
  url:'/extjs/extjs!getDept.action',
  reader:'json',
  autoLoad:true
 }
});

Ext.define("AM.view.deptView",{
 extend:'Ext.tree.Panel',
 alias: 'widget.deptTree',
 title : '部门树形',
 width : 250,
 height: 300,
 padding : '5 3 3 10',
 rootVisible : false,//控制显隐的属性
 config：{
  copyNodes:'' //充当剪切板的作用,临时存放树节点
 }
 //里面得配置与表格类似
 columns:[
  {
   xtype:'treecolumn',
   text:'text',
   150,
   dataIndex:'text'
  },{
   text:'info',
   dataIndex:'info'
  }
 ],
 viewConfig:{
  plugins:{
   ptype :'treeviewdragdrop',
   appendOnly:true //加上这个叶子节点之间拖拽时，会弹出图形警告。
  }
  listeners:{
   drop:function(node,data,voerModel,dropPosition,options){
    alert("把："+data.records[0].get('text')+"移动到："+overModel.get('text'));
   }
   beforedrop:function(node,data,overModel,dropPosition,dropFunction){
    if(overModel.get("leaf")) //如果把一个节点拖到一个叶子节点下面时，这时我可以把叶子节点修改为费叶子节点，就可以放了。
    {
     overModel.set('leaf',true);
    }
   }
  }
 } 
 dockedItems:[{
  xtype:'toolbar',
  dock:'left',
  //ui:'footer',
  items:[
   {xtype:'button',text:'add',id:'add'},
   {xtype:'button',text:'copy',id:'copy'},
   {xtype:'button',text:'delete',id:'delete'}
   {xtype:'button',text:'delete',id:'paste'}
  ]
 },{
  xtype:'toolbar',
  items:[{
   xtype:'button',
   id:'allopen',
   text:'展开全部'
  },{
   xtype:'button',
   id:'allclose',
   text:'收起全部'
  }]
 }],
 store:'deptStore'
});

Ext.define('AM.controller.deptController', {
    extend: 'Ext.app.Controller',
 init:function(){
  this.control({
   "deptTree":{
    checkchange:function(node,checked,options){
     if(node.data.leaf == false)
     {
      if(checked){
       //先展开节点
       node.expand();
       //遍历子节点，如果遇到非叶子节点，将递归遍历
       node.eachChild(function(n){
        n.data.checked = true;
        n.updateInfo({checked:true});
       })
      }else
      {
       //先展开节点
       node.expand();
       //遍历子节点，如果遇到非叶子节点，将递归遍历
       node.eachChild(function(n){
        n.data.checked = false;
        n.updateInfo({checked:false});
       })
      }else
      {
       //只要有一个叶子节点没有选中,父节点都不应该选中
       if(!checked){
        node.parentNode.data.checked = false;
        node.parentNode.updateInfo({checked:false});
       }
      }
     }
     var tree = b.ownerCt.ownerCt;
     //得到选中数据集合
     var nodes = tree.getChaecked();
     for(i=0;i<nodes.length;i++)
     {
      nodes[i].remove(true); //删除该节点
     }
   },
      "deptTree button[id=delete]":{
    click:function(b,e){
     var tree = b.ownerCt.ownerCt;
     //得到选中数据集合
     var nodes = tree.getChaecked();
     for(i=0;i<nodes.length;i++)
     {
      nodes[i].remove(true); //删除该节点
      //通过ajax向后台提交删除数据
      
      //通过这种方式也是可以自动提交到后台的，不过数据可能不是你所需要的。
         //tree.getStore().getProxy().update(new Ext.data.Operation(
       //{action:'remove'} //你写什，它就会提交那个url，eg：{action:'update'}
      //));
      
      //自己组装参数Ajax的提交（常用）
      Ext.Ajax.request({
       //通过这种方式就可以直接获取到store里面配置的url
       //避免url到处乱写
       //其实就是利用了store的proxy里面已经有的api属性来存放url集合
       url: tree.getStore().getProxy().api['remove'],
       params: {
        id: nodes[i].data.id
       },
       success: function(response){
        var text = response.responseText;
        // process server response here
       }
      });
     }
   },
   "deptTree button[id=copy]":{
    click:function(b,e){
     var tree = b.ownerCt.ownerCt;
     //得到数据集合
     var nodes = tree.getChaecked();
     if(nodes.length>0){
      //把数据放到剪切板中
      tree.setCopyNodes(Ext.clone(nodes));
      for(i=0;i<nodes.length;i++)
      {
       nodes[i].data.checked = false; //这个只是更新节点的属性值，并没有更新显示到页面
       nodes[i].updateInfo();//更新显示到页面
      }
     }
    }   
   },
   "deptTree button[id=paste]":{
    click:function(b,e){
     var tree = b.ownerCt.ownerCt;
     //获得被追加孩子的节点集合
     var checkNodes = tree.getChecked();
     //去剪切板中取数据
     var nodes = tree.getCopyNodes();
     if(checkNodes.length == 1 && nodes.lenght > 0){
      // 被追加孩子的节点
      var node  = checkNodes[0];
   
      for(i=0;i<nodes.length;i++){
       var el = nodes[i].data;
       //在这里可以进行组装数据传入后台
       node.appendChild(el);
      }

     }else{
      alert("剪切板中没有数据或没有选中节点");
     }
    }   
   },
  
   "deptTree button[id=allopen]":{
    click:function(b,e){
     var tree = b.ownerCt.ownerCt;
     tree.expandAll();
    }   
   },   
   "deptTree button[id=allclose]":{
    click:function(b,e){
     var tree = b.ownerCt.ownerCt;
     tree.collapseAll();
    }   
   },
   "deptTree button[id=add]":{
    click:function(b,e){
     var tree = b.ownerCt.ownerCt;
     var nodes = tree.getChecked();
     if(nodes.length == 1){
      var node = nodes[0];
      node.appendChild({
       checked:true,
       text:'技术架构组',
       id : '0103',
       leaf:true  
      });
     }else{
      alert("请您选择一个节点");
     }
    }
   },
   "deptTree":{
    itemclick:function(tree,record,item,index,e,options){
     alert(record.get('id'));
    }
   }
  });
 },
 views:[
  'deptView'
 ],
 stores :[
  'deptStore'
 ],
 models :[
 ] 
});