Ext4 简单的treepanel

最新推荐文章于 2015-11-18 09:30:40 发布

zyujie

最新推荐文章于 2015-11-18 09:30:40 发布

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/zyujie/article/details/8208499

本文介绍如何使用Ext4的TreePanel创建树形控件，并演示了基本的配置与交互功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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部分：

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数据源：

{
  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
  }]
}

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