深入浅出ExtJS 第五章 树形结构

 1 5.1 TreePanel的基本使用 2   //树是一种非常典型的数据结构; 3 5.1.1 创建一棵树 4   //树控件有Ext.tree.TreePanel类定义,控件的名称为TreePanel;TreePanel类继承字Panel类; 5   Ext.onReady(function(){ 6     var tree = new Ext.tree.TreePanel({ //创建tree对象; 7       store:new Ext.data.TreeStore({    //传入数据; 8         root:{                          //root根; 9           text:'树根',10           leaf:true11         }12       })13     });14     tree.render('tree');                //将树渲染到DOM;15   });16 17 5.1.2 为树添加枝和叶18   root:{19     text:'我是根',20     children:[{21       text:'我是根的第一个枝子',22       children:[{       //子文件夹;23         text:'我是第一个枝子的第一个叶子',24         leaf:true       //叶子文件;25       },{26         text:'我是根的第一个叶子'27         leaf:true28       }]29     }]30   }31   tree.getRootNode.expand(false,true);32   //参数一:是否递归展开所有子节点;参数二:是否要动画效果;33   34 5.1.3 树形的配置35   //将tree期望渲染的目标id放到{}里;36   renderTo:'tree'37 38 5.1.4 使用TreeStore获得数据39   //Ext.data.TreeStore可以利用从后台获取的数据为我们组装出一棵树来;只需提供数据,让TreeStore完成数据转换和装配节点40   var tree = new Ext.tree.TreePanel({41     store:new Ext.data.TreeStore({42       PRoxy:{43         type:'Ajax',44         url:'xxx.txt'45       },46       root:{text:'我是根'}47     });48     renderTo:'tree'49   });50   //由于异步加载会使用树形TreeStore中的url向后台发送请求;当展开节点执行对应节点的expand()方法时,它会通过Ajax访问url指定的地址并获取数据;而且还会把自己的id作为参数参数传递给url指定的地址;51   //异步读取属性的节点是非常好的方法;只有点击某一节点后才会去获取子节点属性并进行渲染;52   53 5.1.5 使用jsp提供后台数据54   //当某个节点展开时,TreeStore会根据设置的url地址去后台读取数据;55   //而当发动请求时,TreeStore会把这个节点的id作为参数一起发送到后台去;56   //对于后台来说,只要获得node参数,就知道是哪个节点正在执行展开;57   //然后后台根据节点的id返回对应的JSON数据;其中包含id(节点唯一的标识)和text(节点的名称);58   59 5.1.6 通过xml加载树形60   <nodes>61     <node>62       <text>node 1</text>63       <leaf>false</leaf>    //是树结构的文件夹;64     </node>65     <node>66       <text>node 2</text>67       <leaf>true</leaf>     //是树结构的文件;68     </node>69   </nodes>70   var store = Ext.create('Ext.data.TreeStore',{71     proxy:{72       type:'ajax',73       url:'xx.xml',74       extraParams:{75         isXml:true76       },77       reader:{78         type:'xml',79         root:'nodes',80         record:'node'81       }82     },83     sorters:[{84       property:'leaf',85       direction:'ASC'86     },{87       property:'text',88       direction:'ASC'89     }],90     root:{91       text:'Ext JS',92       id:'src',93       expanded:true94     }95   });96   //因为读取XML数据时Ext无法区分上下节点关联,所以想获得多级层级结构,只能通过异步方式一层一层地加载,负责输出数据的后台根据每次发送的node参数判断目前是在展开哪一个节点;

 1 5.2 树的事件 2   //使用on()把一个函数绑定到一个事件上; 3   tree.on('itemexpand',function(node){ 4     console.info(node,"展开了"); 5   }); 6   tree.on("itmecollapse",function(node){ 7     console.inro(node,"折叠了"); 8   }); 9   tree.on("itemclick",function(node){10     console.info("你单击了",node);11   })

 1 5.3 右键菜单 2   >1.先注册一个名为contextmenu的事件,触发事件时,弹出自己定制的菜单; 3   var contextmenu = new Ext.menu.Menu({ 4     id:'theContextMenu', 5     items:[{ 6       text:'点我!', 7       handler:function(){ 8         alert('我被点击了~'); 9       }10     }]11   });12   >2.绑定contextmenu事件13   tree.on('itemcontextmenu',function(view,record,item,index,e){14     e.preventDefault();           //阻止浏览器默认右键;15     contextmenu.showAt(e.getXY);  //调用显示菜单在点击的地方;16   })

 1 5.4 修改节点的默认图标 2   //每个树形节点都有icon和iconCls属性; 3   >.icon 4   { 5     text:'icon', 6     icon:'user_female.png', 7     leaf:true 8   } 9   >.iconCls10   {11     text:'iconCls',12     iconCls:'icon-male',13     leaf:true14   }15   //同时要在HTML中添加对应的CSS定义:16   .x-tree-cion-leaf .icon-male {17     background-image:url(user_male.png);18   }19   //iconCls只能定义背景图片,icon设置的是IMG的SRC部分,icon中设置的图片会把背景图片部分挡住;

 1 5.5 从节点弹出对话框 2   //从事件中获得的node只是一个对象,而不是HTML中一个实际的DOM元素;所以不能直接用animateTarget:node来实现飞出效果; 3   //Ext的树节点都遵循MVC设计,所以要找到对应的DOM元素,应该使用节点的View部分; 4   tree.on("itemclick",function(view,record,item){ 5     Ext.Msg.show({ 6       title:'提示', 7       msg:'你单击了'+record.id, 8       animateTarget:item          //弹窗从点击点弹出; 9     })10   });

1 5.6 节点提示信息2   //鼠标停留在某个节点的上方时,显示提示信息;3   //在JSON中添加对应的节点提示内容,qtip:'xxx';4   //此时代码需要对提示功能初始化;

1 5.7 为节点设置超链接2   //在节点树形中设置超链接的地址;3   //在JSON数据中添加参数href:"xxx.html",打开位置hrefTarget:'_blank';

 1 5.8 树形的拖放 2   //在创建TreePanel时,设置启用插件treeviewdragdrop;从而实现叶子与树杈和根之间的拖放; 3   var tree = new Ext.tree.TreePanel({ 4     viewConfig:{ 5       plugins:{ptype:'treeviewdragdrop'}  //启用拖拽插件; 6     }, 7     store:new Ext.data.TreeStore({ 8       proxy:{ 9         type:'ajax',10         url:'xxx.txt'11       },12       root:{text:'我是根'}13     })14     tree.renderTo('tree');15   });16 17 5.8.1 节点拖放的三种形式18   >1.append:放下去的节点会变成目标节点的子节点;19   >2.above:放下去的节点和目标节点是兄弟关系,放下去的节点排行在前;20   >3.below:放下去的节点与目标节点是兄弟关系,放下去的节点排行在后;21 22 5.8.2 叶子拖拽问题23   //Ext规定:如果节点包含leaf:true;就不能用拖放的方式添加子节点;24   tree.view.on("beforedrop",function(node,data,overModel,dropPosition,dropHandler){25     if(overModel.get('leaf')){      //判断鼠标指针经过的节点是否包含leaf:true;26       overModel.set('leaf',false);  //更改leaf属性;27       overModel.set('loaded',true); //设置可以拖拽;28     }29     return true;30   });31 32 5.8.3 判断拖放的目标+Ajax提交33   //drop事件是拖放的节点放下去时触发的;34   tree.view.on("drop",function(node,data,overModel,dropPosition,dropHandler){35     //node:正在拖放的节点;36     //overModel:是放下去碰到的节点;37     //dropPosition:是放下去的方式;38     //通过这些数据,我们可以知道当前节点的位置和状态,从而计算出数据并通过Ajax发送给后台;让后台对节点的数据进行更行;39     Ext.Msg.alert("提示","咱们的节点"+node.id+"掉到了"+overModel.get('id')+"上,掉落方式是"+dropPosition);40     var item = {41       dropNode:node.id,42       target:overModel.get('id'),43       point:dropPosition44     };45     Ext.Ajax.request({46       method:'POST',47       url:'xxx.jsp',48       success:function(response){ 49       //response:相应对象;其中包含响应状态和响应内容;50         Ext.Msg.alert('信息',response.responseText);  51         //responseText:以文本形式返回信息;52       },53       failure:function(){54         Ext.Msg.alert("错误","与后台联系时出现问题");55       },56       params:{57         //发送给后台的参数;"name1=value1&name2=value2";58         data:encodeURIComponent(Ext.encode(item))59         //对参数进行编码,避免出现非法字符;60       }61     });62   });63 64 5.8.4 树之间的拖放65   //对两棵树都设置ptype:'treeviewdragdrop';

1 5.9 对树进行排序2   //设置folderSort:true参数,可以实现为树形进行排序;3   var tree = new Ext.tree.TreePanel({4     store:new Ext.data.TreeStore({5       folderSort:true,      //为属性自动排序;6       proxy:{..}7       root:{...}8     })9   });

 1 5.10 带Checkbox的树形 2   //在节点数据设置参数:checked:true; 3   var tree = new Ext.tree.TreePanel({ 4     store:new Ext.data.TreeStore({ 5       root:{ 6         text:'我是根', 7         children:[{text:'Leaf No.1',leaf:true,checked:true}] 8         //为叶子前添加复选框; 9       }10     })11   });

 1 5.11 表格与树形的结合 2   //在表格中实现分级显示的功能;两者都支持对不同分类数据执行展开和折叠的操作; 3   //通过扩展使用treecolumn插件的方式实现表格与树形结合的效果; 4   Ext.onReady(function(){ 5     Ext.define('Task',{       //定义Task类; 6       extend:'Ext.data.Model',//继承Model类; 7       fields:[ 8         {name:'task',type:'string'}, 9         {name:'user',tyhpe:'string'},10         {name:'duration',type:'string'}11       ]12     });13 14     var tree = new Ext.tree.TreePanel({15       rootVisible:false,    //隐藏根节点;16       title:'示例',17       renderTo:'tree',18       collapsible:true,     //具有可折叠功能;19       useArrows:true,       //在tree中使用Vista-style样式的箭头;20 21       columns:[{            //每一行应该分为激烈进行显示;22         xtype:'treecolumn', 23         header:'任务',24         width:330,25         dataIndex:'task'    //设置任务列;26       },{27         xtype:'treecolumn',28         header:'持续时间',29         width:100,30         dataIndex:'duration'31       },{32         xtype:'treecolumn',33         header:'负责人',34         width:100,35         dataIndex:'user'36       }],37 38       store:new Ext.data.TreeStore({39         model:Task,40         proxy:{41           type:'ajax',      //设置Ajax方式传送;42           url:'xxx.txt'43         },44         root:{45           text: