Ext4 简单的treepanel

转载：http://blog.csdn.net/zyujie/article/details/8208499

最近在学习Ext4，记录一些有关Ext4实现控件的方法：

Ext4的treePanel和之前3x的版本有一些差别。使用的版本是ext-4.0.7-gpl

html部分：

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <link type="text/css" rel="stylesheet" href="css/index.css" />  
  7. <link type="text/css" rel="stylesheet" href="resources/css/ext-all.css" />  
  8. <script type="text/javascript" language="javascript" src="ext-all.js"></script>  
  9. <script type="text/javascript" language="javascript" src="locale/ext-lang-zh_CN.js"></script>  
  10. <script type="text/javascript" language="javascript" src="js/index.js"></script>  
  11. </head>  
  12.   
  13. <body>  
  14.     <div id="subMenu"></div>  
  15. </body>  
  16. </html>  


js部分：

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. Ext.onReady(function(){  
  2.       
  3.     Ext.define('Task', {  
  4.         extend: 'Ext.data.Model',  
  5.         fields: [  
  6.             {name: 'id',  type: 'string'},  
  7.             {name: 'text',  type: 'string'}  
  8.         ],  
  9.     });  
  10.       
  11.     var store = Ext.create('Ext.data.TreeStore',{  
  12.         model: 'Task',  
  13.         proxy: {  
  14.             type: 'ajax',  
  15.             url: 'treegrid.json'    //必须要搭建个服务器才可以访问json，不然会报错。拒绝访问  
  16.         },  
  17.         reader: {  
  18.             type: 'json'  
  19.         },  
  20.         root: {  
  21.             text: 'root',  
  22.             id: '0',  
  23.         }  
  24.     });  
  25.       
  26.     var menuTree = Ext.create('Ext.tree.Panel',{  
  27.         title: '用户管理',  
  28.         autoScroll:true,    
  29.         width: "100%",  
  30.         height: "100%",  
  31.         store: store,  
  32.         rootVisible: true,  
  33.         renderTo: 'subMenu',  
  34.         listeners : {  
  35.             'itemclick' : function(view,record){  
  36.                 if(record.data.leaf){  
  37.                     alert(record.data.id);  
  38.                 }else{  
  39.                     if(record.data.expanded){  
  40.                         view.collapse(record);  
  41.                     }else{  
  42.                         view.expand(record);  
  43.                     }  
  44.                 }  
  45.             }  
  46.         }  
  47.     });  
  48.   
  49.     menuTree.store.load();  
  50.       
  51. });  


json数据源：

[plain] view plaincopy在CODE上查看代码片派生到我的代码片
  1. {  
  2.   id:'1',  
  3.   text:'treenode 1',  
  4.   expanded:true,  
  5.   children:[{  
  6.     id:'11',  
  7.     text:'treenode 11',  
  8.     leaf:true  
  9.   },{  
  10.     id:'12',  
  11.     text:'treenode 12',  
  12.     expanded:true,  
  13.     children:[{  
  14.       id:'121',  
  15.       text:'treenode 121',  
  16.       leaf:true  
  17.     },{  
  18.       id:'122',  
  19.       text:'treenode 122',  
  20.       leaf:true  
  21.     }]  
  22.   },{  
  23.     id:'13',  
  24.     text:'treenode 13',  
  25.     leaf:true  
  26.   }]  
  27. }  


一个简单的treepanel就出现了，至于一些拓展功能，如复选树，修改，编辑，拖动等功能，可以参照API来实现。

posted @ 2014-01-24 15:33  天马3798  阅读(303)  评论(0)  编辑  收藏  举报