Ext中tree组件入门

一、类结构

       Ext.panel.Panel

              Ext.panel.Table

                     Ext.tree.Panel== 与grid完全一样

二、tree组件的实例，快速实现一个demo

       主要配置项

              title  标题

              width宽

              height高

              renderTo渲染到什么地方

              root控制根节点(Ext.data.Model/Ext.data.NodeInterface)

              animate：Boolean  控制首期和展开是否有动画效果

              store: store的数据集合

       重要事件：itemclick  当点击项的时候触发

      

三、Ext.data.TreeStore

       动态的从数据库拿出来模型来添加节点

代码如下：

       view层的实现

       Ext.define("AM.view.deptView",{

       extend:"Ext.tree.Panel",

       alias:"widget.deptTree",

       title:"部门树形",

       width:250,

       height:300,

       padding:"55 5 10",

       rootVisible:false,  //设置根节点的显隐属性

       dockedItems:[{

              xtype:"toolbar",

              dock:"left",//指定显示的位置

              //ui:"footer",  //指定样式，footer是系统自带的样式

              items:[

                     {xtype:"button",text:"add",id:"add"},

                     {xtype:"button",text:"copy",id:"copy"},

                     {xtype:"button",text:"delete",id:"delete"}

              ]

       },{

              xtype:"toolbar",

              items:[

                     {xtype:"button",text:"展开所有",id:"openall"},

                     {xtype:"button",text:"收起所有",id:"closeall"}

              ]

       }],

       //store:"deptStore",  //指定数据集，来动态的添加节点

       root:{    //指定节点

              text:"root",

              id:"0",

              leaf:false,  //是否是叶子

              children:[{   //定义它的子节点

                     text:"技术部门",

                     id:"01",

                     checked:false,

                     leaf:false,

                     children:[{

                            text:"研发部",

                            id:"0101",

                            checked:false,

                            leaf:true

                     },{

                            text:"实施部",

                            id:"0102",

                            checked:false,

                            leaf:true

                     }]

              },{

                     text:"后勤部门",

                            id:"02",

                            checked:false,

                            leaf:false,

                            children:[{

                                   text:"人事部",

                                   id:"0201",

                                   checked:false,

                                   leaf:true

                            },{

                                   text:"财务部",

                                   id:"0202",

                                   checked:false,

                                   leaf:true

                            }]

                     }]

              }

       });

      

      

       controller层的实现：

       Ext.define("AM.controller.deptController",{

       extend:"Ext.app.Controller",

       init:function(){

              this.control({

                     "deptTreebutton[id=openall]":{

                            click:function(b,e){

                                   vartree=b.ownerCt.ownerCt;

                                   tree.expandAll();  //展开所有

                            }

                     },

                     "deptTreebutton[id=closeall]":{

                            click:function(b,e){

                                   vartree=b.ownerCt.ownerCt;

                                   tree.collapseAll();  //收起所有

                            }

                     },

                     "deptTree":{

                            itemclick:function(view,record,item,index,e,options){

                                   alert(record.get("id"));

                            }    

                     },

                     "deptTreebutton[id=add]":{

                            click:function(b,e){

                                   vartree=b.ownerCt.ownerCt;

                                   varnodes=tree.getChecked();

                                   if(nodes.length==1){

                                          varnode=nodes[0];

                                          node.appendChild({

                                                 text:"技术架构部",

                                                 id:"0103",

                                                 checked:true,

                                                 leaf:true

                                          });

                                   }else{

                                          alert("请您选择一个节点");

                                   }

                            }

                           

                     }

              });

       },

       views:["deptView"],

       stores:["deptStore"],

       models:[]

       });

       app.js等配置与grid配置的mvc模式一样