所有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布局
}) ;
分享到：
相关推荐
### ExtJS布局管理学习指南 #### 一、引言 ExtJS是一款强大的JavaScript框架，用于构建复杂的前端应用程序。其中布局管理是ExtJS的核心特性之一，它可以帮助开发者有效地组织UI组件，使得用户界面既美观又实用。...
以上介绍的只是Extjs布局管理中的一小部分，Extjs官网提供了丰富的例子和详细的文档，这是学习Extjs布局的最佳资源。通过官网的例子，可以直观地看到不同布局类型的效果和配置方法，极大地便利了开发者的布局实践和...
### ExtJS布局之border实例详解 #### 一、Border布局简介 在ExtJS框架中，`border`布局是一种非常常见的布局方式，它将容器划分为五个区域：north（北）、south（南）、east（东）、west（西）以及center（中心）。...
### ExtJS布局类型 #### 1. **Column Layout** 文件中的示例使用了`column`布局，这是ExtJS中的一种常用布局方式，用于将子元素按列排列。例如，在代码中，可以看到一个`Ext.Panel`对象被创建，并指定了`layout:'...
此外，ExtJS 支持响应式布局，能够在不同设备上提供良好的用户体验。 在"Extjs文件管理系统"中，文件管理功能是核心。文件压缩和解压功能通常依赖于后台服务，如使用 ZIP 或 RAR 库来处理压缩和解压缩任务。前端...
ExtJs的核心特性包括数据绑定、布局管理、拖放功能、可访问性支持以及强大的图表功能。在"教学管理系统"中，ExtJs可能被用来创建交互式的界面元素，如可排序和分页的课程表，或者可编辑的学生信息表单。 .Net框架是...
3. **响应式布局**：EXTJS支持响应式布局，可以自适应不同设备和屏幕尺寸，保证在移动端和桌面端都有良好的用户体验。 4. **强大的图表组件**：EXTJS内置了多种图表类型，可用于展示合同数据的统计分析，帮助企业...
### ExtJS布局全面讲解 #### 一、Border Layout（方位布局） **定义与特性：** - **定义**：Border布局由类`Ext.layout.BorderLayout`定义，布局名称为`border`，这是一种非常实用且常见的布局方式，适用于创建...
Extjs提供了丰富的组件和布局模式，使得开发者能够轻松创建复杂的用户界面。其数据绑定机制和Model-View-Controller（MVC）设计模式，有助于保持前端逻辑的清晰与分离，同时增强了应用的可维护性和可扩展性。 后台...
其强大的布局管理和组件模型可以帮助开发者快速构建复杂的交互式界面。例如，使用Grid Panel展示新闻列表，Text Field用于输入新闻标题，Date Picker处理发布日期，而Editor Grid则可以支持直接在表格内编辑数据。 ...
### ExtJS布局管理器：BorderLayout **BorderLayout** 是ExtJS中的一个布局管理器，它将容器划分为五个部分：北、南、东、西和中心区域。每个区域都可以包含一个组件。例如，在文件中提到了 `layout: 'accordion'`，...
5. **Layouts**：EXTJS的布局管理器确保组件在不同屏幕尺寸和分辨率下的适配，如Fit、Border、Accordion等布局。 6. **Drag & Drop**：EXTJS支持拖放操作，方便用户重新排列组件或在组件之间传输数据。 7. **Ajax...
描述中提到"淘宝买的"，这可能意味着这个系统是基于某个开源模板或者框架修改而来的，可能包括了预定义的UI组件、布局、以及一些常见的后台管理功能模块。"亲试可用"表明这个系统经过了一定程度的测试，具有较好的...
这包括学习ExtJS的架构、事件模型、布局管理、组件系统以及数据绑定。在ExtJS中，每个UI元素都是一个组件，它们可以通过组合和配置来创建复杂的用户界面。事件模型允许组件之间进行交互，而数据绑定则实现了视图和...
以下是关于ExtJS布局的详细解释： 1. **基本知识：布局操作** - 布局操作涉及容器组件内的子元素组件如何组织和分布。 - 布局的基类是`Ext.layout.ContainerLayout`，它提供了所有布局的基础功能，但本身并不具有...
在3.2版本中，它提供了丰富的组件和布局管理机制，使得开发者可以构建出复杂的、响应式的用户界面。"ExtJS3.2列布局"是这个框架中的一个重要概念，尤其在处理form表单时非常实用。 列布局（Column Layout）是ExtJS...
它提供了丰富的组件和布局管理功能，使得开发者能够创建复杂、交互式的用户界面。在本篇博客中，我们将聚焦于"accordion布局"这一特性，它是ExtJS布局系统中的一种特殊形式。 Accordion布局，又称为折叠面板布局，...
7. **响应式设计**：EXTJS支持移动设备，使用`Ext.viewport`和`Ext.layout.container.Box`等布局管理器，可以实现跨平台的响应式设计，确保在不同设备上都能提供良好的用户体验。 在压缩包文件`ysc-APDPlat-5e7a864...
此外，EXTJS的布局管理机制也是其强大之处，它可以自动调整组件的大小和位置以适应屏幕尺寸变化。这在图书管理系统中尤其重要，确保用户在不同分辨率和设备上都能获得一致的体验。 总的来说，"EXTJS图书管理系统...