ExtJs格局管理
日期：2014-05-16 浏览次数：20522 次
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 createAccordionPa
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
