Ext.container.Viewport是一款非常常用的布局容器,它会自动把自己输出到HTMl页面,而且在页面的上中下左右中5个布局
<script>
Ext.onReady(function()
{
//创建一个TreeStore,TreeStore负责为Tree提供数据
var store=Ext.create('Ext.data.TreeStore',
{
root:{
expanded:true,
children:[
{
text:"疯狂系列",expanded:true,children:[
{id:1,text:"疯狂java讲义",leaf:true},
{id:2,text:"spring",leaf:true},
{id:3,text:"mybatis",leaf:true}
]
},
{
text:"补充图书",expanded:true,children:[
{id:4,text:"权威指南",leaf:true},
{id:5,text:"学习指南",leaf:true}
]
}
]
}
});
Ext.create('Ext.container.Viewport',
{
layout:'border',
items:[
//上面区域
{
region:'north',
html:'<div style="width:900px"><a href="http://www.fkjava.org"><img alt="疯狂java" src="logo.gif"/></a><a href="http://www.fkjava.org"><img alt="疯狂教育" src="banner.gif"></a></div>',
height:90,
border:false,
margins:'0 0 5 0'
},
//左边区域
{
region:'west',
xtype:'treepanel',//表明这是Ext.tree.Panel
title:'疯狂java体系',
listeners:{
//为itemclick时间添加监听器
itemclick:function(view,record,item){
//如果是叶子节点
if(record.data.leaf){
//获取页面中的my_center组件,该组件是Ext.tab.Pannel组件
var tabPanel=Ext.getCmp('my_center');
//如果页面中没有该图书id对应组件
if(!Ext.getCmp(record.data.id)){
//向Ext.tab.panel组件中插入一个新的tab页面
var tab=tabPanel.add(
{
//设置新tab页面的属性
id:record.data.id,
title:record.data.text,
html:record.data.text,
closable:true
});
}
//激活正在查看的图书
tabPanel.setActiveTab(record.data.id);
//向下边区域的Ext.panel.Panel组件中插入内容
Ext.getCmp('info').add({
html:'正在操作《'+record.data.text+'》图书!'
});
}
}
},
width:200,
store:store,
rootVisible:false
},
//下边区域内容,使用一个普通Ext.panel.Panel
{
id:'info',
region:'south',
title:'操作信息',
collapsible:true,
split:true,
height:100,
minHeight:100
},
//右边区域
{
region:'east',
title:'右边栏',
collapsible:true,
split:true,
width:150
},
//中间面板
{
region:'center',
id:'my_center',
xtype:'tabpanel',
activeTab:0,
items:{
title:'首页',
html:'学习Ext.container.Viewport的例子'
}
}
]
});
});
</script>