Ext4 简单的treepanel-白红宇

Ext4 简单的treepanel

阅读量：4314 次

发布时间：2019-06-06

本文共 2031 字，大约阅读时间需要 6 分钟。

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

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

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

html部分：

[html]
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<link type="text/css" rel="stylesheet" href="css/index.css" />  
<link type="text/css" rel="stylesheet" href="resources/css/ext-all.css" />  
<script type="text/javascript" language="javascript" src="ext-all.js"></script>  
<script type="text/javascript" language="javascript" src="locale/ext-lang-zh_CN.js"></script>  
<script type="text/javascript" language="javascript" src="js/index.js"></script>  
</head>  
  
<body>  
    <div id="subMenu"></div>  
</body>  
</html>  

js部分：

[javascript]
 
Ext.onReady(function(){  
      
    Ext.define('Task', {  
        extend: 'Ext.data.Model',  
        fields: [  
            {name: 'id',  type: 'string'},  
            {name: 'text',  type: 'string'}  
        ],  
    });  
      
    var store = Ext.create('Ext.data.TreeStore',{  
        model: 'Task',  
        proxy: {  
            type: 'ajax',  
            url: 'treegrid.json'    //必须要搭建个服务器才可以访问json，不然会报错。拒绝访问  
        },  
        reader: {  
            type: 'json'  
        },  
        root: {  
            text: 'root',  
            id: '0',  
        }  
    });  
      
    var menuTree = Ext.create('Ext.tree.Panel',{  
        title: '用户管理',  
        autoScroll:true,    
        width: "100%",  
        height: "100%",  
        store: store,  
        rootVisible: true,  
        renderTo: 'subMenu',  
        listeners : {  
            'itemclick' : function(view,record){  
                if(record.data.leaf){  
                    alert(record.data.id);  
                }else{  
                    if(record.data.expanded){  
                        view.collapse(record);  
                    }else{  
                        view.expand(record);  
                    }  
                }  
            }  
        }  
    });  
  
    menuTree.store.load();  
      
});  

json数据源：

[plain]
 
{  
  id:'1',  
  text:'treenode 1',  
  expanded:true,  
  children:[{  
    id:'11',  
    text:'treenode 11',  
    leaf:true  
  },{  
    id:'12',  
    text:'treenode 12',  
    expanded:true,  
    children:[{  
      id:'121',  
      text:'treenode 121',  
      leaf:true  
    },{  
      id:'122',  
      text:'treenode 122',  
      leaf:true  
    }]  
  },{  
    id:'13',  
    text:'treenode 13',  
    leaf:true  
  }]  
}  