Extjs4.0.7 tree 结构读取json文件（在框架viewport中）
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, //是否显示根节点
// renderTo: Ext.getBody()
containerScroll:true,
listeners: {
'itemclick': function (view, record) {
var leaf = record.get('leaf');
if (leaf) {
alert('is leaf!');
var id = record.get('id');
var text = record.get('text');
var tabPanel = Ext.getCmp('MAINPANEL');
/*
var tab = tabPanel.getComponent(id);
if (!tab) {
tabPanel.add(Ext.create('Tesz.App.Panels.' + id)).show();
}
tabPanel.setActiveTab(tab);
*/
}
else {
alert('not leaf!');
var expand = record.get('expanded')
if (expand) {
view.collapse(record);
}
else {
view.expand(record);
}
}
}
} //listeners -------funcation end----------
});
var west=new Ext.Panel({
collapsible:true, //自动收缩按钮
split: true,
border:false,
width:225,
layout:"accordion",
//extraCls:"roomtypegridbbar", //添加动画效果
layoutConfig: {
animate: true
},
region:"west",
title:'威威系统',
items:[{
title:"<b>生产系统模块</b>",
autoScroll:true,
items:[treepanel2],
iconCls:"hotelmanageicon"
},{
title:"<b>人事薪资系统模块</b>",
autoScroll:true,
iconCls:"hotelmanageicon"
//items:[treenode]
},{
title:"<b>OA系统模块</b>",
autoScroll:true,
iconCls:"hotelmanageicon"
//items:[treenode]
},{
iconCls:"gonggao",
title:"<b><span style='color:red';>Hotel Notice</span></b>"
//items:[publishinfosgrid]
}]
});
//------------------------------------------程序开始-------------------------------------
Ext.onReady(function () {
//定义树形组件
//Ext.Msg.alert('提示信息', '学习EXTJS');
var vp=new Ext.Viewport({
layout:"border",
items:[north, east, west, center, south]
});
});