Ext4 简单的treepanel
最近在学习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来实现。