ExtJs布局管理
所有ExtJs的Layout Class都在API Documentation->Ext->Layout下,如果想用哪种而已方式可以直接查询API帮助文档.我写这篇文章的意思是把学习的时候做的笔记保留下了,为了以后使用方便.
下面列出的是一些常用的Layout.
layout.html页面代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ExtJs Layout Example</title>
<link rel="stylesheet" type="text/css" href="../ext-3.2.0/resources/css/ext-all.css"></link>
<script type="text/javascript" src="../ext-3.2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.2.0/ext-all.js"></script>
<script type="text/javascript" src="../js/layout.js"></script>
</head>
<body>
<div id="columnId"></div>
<div id="borderId"></div>
<div id="fitId"></div>
<div id="accordionId"></div>
<div id="anchorId"></div>
</body>
</html>
以下的代码都是放在..js/layout.js文件中的.
1.columnLayout
/*
创建column布局
*/
function createColumnPanel(){
var obj = {
title : '父面板',
width : 600,
height : 400,
layout : 'column',//一列一列的显示容器中的元素
items : [{
xtype : 'panel',//子元素中默认的显示类型为:panel.也可以根据需要换成button等.
title : '页面1',
columnWidth : 0.5,//以面板整体宽度大小的25%大小进行填充.
height : 200,//高度为固定值.
layout : 'column',
items : [{
xtype : 'button',
text : '按钮1',
columnWidth : 0.5
},{
xtype : 'button',
text : '按钮2',
columnWidth : 0.5
}],
html : '我是面板1'
},{
title : '页面2',
columnWidth : 0.5,
height : 50,
html : '我是面板2'
}]
} ;
//实例化父面板
var mainPanel = new Ext.Panel(obj) ;
//将父面板添加到id为columnId的标签上.
mainPanel.render("columnId") ;
}
2.borderLayout
/*
创建border布局
*/
function createBorderPanel(){
var obj = {
title : '父面板',
width : 600,
height : 400,
layout : 'border',//以东南西北中的方式显示容器中的元素
items : [{
title: 'North Region',
region: 'north', // 上
height : 50
},{
title: 'South Region',
region: 'south', // 下
height: 50
},{
title: 'West Region',
region:'west', // 左
split: true, //设置可以调整该panel的大小(宽度)
collapsible: true, //设置该面板是否可以收缩
width: 50
},{
title: 'East Region',
region: 'east', // 右
width : 50
},{
title: 'Center Region',
region: 'center', // 中,此面板必须存在.
layout: 'border',
items: [{
title: 'west',
region: 'west',
width: '50%'
},{
title: 'center',
region: 'center',
}]
}]
} ;
//实例化父面板
var mainPanel = new Ext.Panel(obj) ;
//将父面板添加到id为borderId的标签上.
mainPanel.render("borderId") ;
}
3.fitLayout
/*
创建fit布局
*/
function createFitPanel(){
var obj = {
title : '父面板',
width : 600,
height : 400,
layout : 'fit',//填满整个外部容器,只能看到一个子元素
items : [{
title : '页面1',
html : '我是面板1'
},{
title : '页面2',
html : '我是面板2'
}]
} ;
//实例化父面板
var mainPanel = new Ext.Panel(obj) ;
//将父面板添加到id为columnId的标签上.
mainPanel.render("fitId") ;
}
4.accordionLayout
/*
创建accordion布局
*/
function createAccordionPanel(){
var obj = {
title : '父面板',
width : 600,
height : 400,
layout : 'accordion',//制作应用程度菜单式样式.
items : [{
title : '菜单1',
items : [{
xtype : 'panel',
title : 'a',
}]
},{
title : '菜单2',
items : [{
xtype : 'panel',
title : 'a',
},{
xtype : 'panel',
title : 'b',
}]
}]
} ;
//实例化父面板
var mainPanel = new Ext.Panel(obj) ;
//将父面板添加到id为columnId的标签上.
mainPanel.render("accordionId") ;
}
5.anchorLayout
/*
创建anchor布局
*/
function createAnchorPanel(){
var obj = {
title : '父面板',
width : 600,
height : 400,
layout : 'anchor',// 好处1:可以让子元素的大小根据父元素的大小确定.
items : [{
title : '菜单1',
anchor : '50% 30%' //利用achor方式布局子元素.
},{
title : 'b',
width : 50,
height : 50
}]
} ;
//实例化父面板
var mainPanel = new Ext.Panel(obj) ;
//将父面板添加到id为columnId的标签上.
mainPanel.render("anchorId") ;
}
Ext.onReady方法如下:
/*
页面成功载入后会第一个调用此方法
*/
Ext.onReady(function(){
createColumnPanel() ;//创建column布局
document.getElementById("columnId").style.display = 'none' ;//隐藏column布局
createBorderPanel() ;//创建border布局
document.getElementById("borderId").style.display = 'none' ;//隐藏border布局
createFitPanel() ;//创建fit布局
document.getElementById("fitId").style.display = 'none' ;//隐藏fitId布局
createAccordionPanel() ;//创建accordion布局
document.getElementById("accordionId").style.display = 'none' ;//隐藏accordion布局
createAnchorPanel() ;//创建anchor布局
}) ;