Extjs4.0.7 tree 结构读取json文件(在框架viewport中)
test.json 文件
{children:[
{id:'01',text:'a01',children:[
{id:'01-01',text:'a01-01',leaf:true},
{id:'01-02',text:'a01-02',children:[
{id:'01-02-01',text:'b01-02-01',leaf:true},
{id:'01-02-02',text:'a01-02-02',leaf:true}
]},
{id:'01-03',text:'b01-03',leaf:true}
]},
{id:'02',text:'b02',leaf:true}
]}
viewport_tree.js
//--------------------------------------定义上边 top窗体----------------------------
var north=new Ext.Panel({
title: 'north',
region: 'north',
split: true,
border: true,
collapsible: true,
height: 80,
minSize: 100,
maxSize: 120
});
//--------------------------------------定义右边 east窗体----------------------------
var east=new Ext.Panel({
title: 'east',
region: 'east',
split: true,
border: true,
collapsible: true,
width: 100,
minSize: 100,
maxSize: 120
});
//--------------------------------------定义下边south窗体----------------------------
var south=new Ext.Panel({
title: 'south',
region: 'south',
split: false,
border: true,
height:80,
collapsible: true
});
//--------------------------------------定义左边 west 窗体----------------------------
var treeStore1 = Ext.create('Ext.data.TreeStore', {
autoLoad : true,
proxy: {
type: 'ajax',
url: 'test.json.json',
reader: {
type: 'json',
root: 'children'
//record: 'node'
}
},
sorters: [{
property: 'leaf',
direction: 'ASC'
}],
root: {
nodeType: 'async',
text: 'Ext JS',
//id: '00',
expanded: true
}
});
var treepanel1 = Ext.create('Ext.tree.TreePanel', {
//如果超出范围带自动滚动条
autoScroll:true,
//animate:true,
//root:root,
//默认根目录不显示
rootVisible:true,
border:false,
animate:true,
lines:true,
//enableDD:true,
height:600,
store:treeStore1
//width: 500
//containerScroll:true
});
var treepanel2 = Ext.create('Ext.tree.Panel', {
//title: '简单的树形组件',
store: treeStore1,
animate:true,
autoScroll:true, //如果超出范围带自动滚动条
width: 500,
height:400,
border:true, //显示tree side frame
//数据容器
//loader:new Ext.tree.TreeLoader({url:"web/MenuTree.json"}),
rootVisible: true, //是否显示根节点
&
补充:web前端 , JavaScript ,