table
<html>
<head>
<title>Table Layout</title>
<!-- GC -->
<script type="text/javascript" src="../../examples/shared/include-ext.js"></script>
<script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
<script type="text/javascript" src="table.js"></script>
<style type="text/css">
#main-panel td {
padding:5px;
}
</style>
</head>
<body>
</body>
</html>
Ext.onReady(function() {
var panel = Ext.create('Ext.Panel',{
id:'Panel',
baseCls:'x-plain',
renderTo:Ext.getBody(),
layout:{
type:'table',
columns:3
},
defaults:{
frame:true,
width:200,
height:200
},
items:[{
title:'Sub1'
},
{
title:'Sub2'
},
{
title:'Sub3'
},
{
title:'Sub4',
width:410,
colspan:2
},
{
title:'Sub5',
rowspan:2,
height:410
}
]
});
});
Box
box.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Box演示</title>
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<script type="text/javascript" src="../../examples/shared/include-ext.js"></script>
<script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
<script type="text/javascript" src="box.js"></script>
</head>
<body>
</body>
</html>
Ext.onReady(function(){
Ext.create('Ext.Viewport',{
title:'Box演示',
width:600,
height:100,
items:[{
layout: {
type:'hbox',
type:'vbox',
padding:'10',
pack:'start',
align:'top'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4'
}]
}]
})
})
Border
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Border Layout</title>
<style type="text/css">
.big-glyph {
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
line-height: 20px !important;
margin-top: 2px;
}
.ux-arrow {
cursor: pointer;
}
.ux-arrow-over {
color: red;
}
.ux-arrow-current-north .ux-arrow-up,
.ux-arrow-current-south .ux-arrow-down,
.ux-arrow-current-east .ux-arrow-right,
.ux-arrow-current-west .ux-arrow-left {
color: #c0c0c0;
cursor: not-allowed;
}
</style>
<script type="text/javascript" src="../../examples/shared/include-ext.js"></script>
<script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
<script type="text/javascript" src="border.js"></script>
</head>
<body>
</body>
</html>
Ext.require(['*']);
Ext.onReady(function() {
var newRegions = [{
region: 'north',
title: 'North 2',
height: 100,
collapsible: true,
weight: -120
}, {
region: 'east',
title: 'East 2',
width: 100,
collapsible: true,
weight: -110
}, {
region: 'west',
title: 'West 2',
width: 100,
collapsible: true,
weight: -110
}];
var viewport = Ext.create('Ext.Viewport',{
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items:[{
region:'north',
collapsible:true,
title:'North',
split:true,
height:100,
minHeight:60,
html:'This is north'
},{
region:'west',
collapsible:true,
title:'West for 30%',
width:'30%',
split:true,
minWidth:100,
minHeight:140,
bodyPadding:10,
html:'30% width for west'
},{
region:'center',
html:'This is Center',
title:'Center',
minHeight:80,
collapsible:true,
split:true
},{
region:'east',
collapsible:true,
split:true,
width:300,
minHeight:140,
minWidth:120,
title:'East',
floatable:true
},{
region: 'south',
height: 100,
split: true,
collapsible: true,
title: 'Splitter south -100',
minHeight: 60,
html: 'center south',
weight: -100
},{
region: 'south',
collapsible: true,
split: true,
height: 200,
minHeight: 120,
title: 'South',
layout: {
type: 'border',
padding: 5
},
items: [{
title: 'South Central',
region: 'center',
minWidth: 80,
html: 'South Central'
}, {
title: 'South Eastern',
region: 'east',
flex: 1,
minWidth: 80,
html: 'South Eastern',
split: true,
collapsible: true
}, {
title: 'South Western - not resizable',
region: 'west',
flex: 1,
minWidth: 80,
html: 'South Western<br>I collapse to nothing',
split: true,
collapsible: true,
splitterResize: false,
collapseMode: 'mini'
}]
}]
});
});
Anchor
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Anchor Layout Example</title>
<!-- GC -->
<script type="text/javascript" src="../../examples/shared/include-ext.js"></script>
<script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
<script type="text/javascript" src="anchor.js"></script>
</head>
<body>
</body>
</html>
Ext.onReady(function() {
Ext.create('Ext.Viewport', {
layout:'anchor',
items:[{
title:'Item 1',
html:'100% 20%',
anchor:'100% 20%'
},{
title:'Item 2',
html:'50% 30%',
anchor:'50% 30%'
},{
title:'Item 3',
html:'-100 50%',
anchor:'-100 50%'
}]
});
});
Column
<html>
<head>
<title>Column Layout</title>
<!-- GC -->
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
.x-panel-body p {
margin:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png) !important;
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png) !important;
}
</style>
<script type="text/javascript" src="../../examples/shared/include-ext.js"></script>
<script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
<script type="text/javascript" src="../shared/examples.js"></script>
<script type="text/javascript" src="column.js"></script>
</head>
<body>
</body>
</html>
Ext.require(['*']);
Ext.onReady(function() {
var viewport = Ext.create('Ext.Viewport',{
layout:'column',
autoScroll:true,
defaultType:'container',
items:[{
columnWidth:1/3,
padding:'5 0 5 5',
items:[{
title:'Sub1',
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:1/3,
padding:'5 0 5 5',
items:[{
title:'Sub2',
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:1/3,
padding:5,
items:[{
title:'Sub3_1',
html: Ext.example.shortBogusMarkup
},{
margin:'5 0 0 0',
title:'Sub3_2',
html: Ext.example.shortBogusMarkup
}]
}]
});
});
官方综合使用布局的例子
<html>
<head>
<style type="text/css">
p {
margin:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
.info {
background-image:url(../shared/icons/fam/information.png);
}
</style>
<script type="text/javascript" src="../../examples/shared/include-ext.js"></script>
<script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
<script type="text/javascript" src="complex.js"></script>
</head>
<body>
<!-- use class="x-hide-display" to prevent a brief flicker of the content -->
<div id="west" class="x-hide-display">
<p>Hi. I'm the west panel.</p>
</div>
<div id="center2" class="x-hide-display">
<a id="hideit" href="#">Toggle the west region</a>
<p>My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>
<p>The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
<p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
<p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id="center1" class="x-hide-display">
<p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;">
</div>
<div id="south" class="x-hide-display">
<p>south - generally for informational stuff, also could be for status bar</p>
</div>
</body>
</html>
Ext.require(['*']);
Ext.onReady(function() {
Ext.QuickTips.init();
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
var viewport = Ext.create('Ext.Viewport', {
id: 'border-example',
layout: 'border',
items: [
// create instance immediately
Ext.create('Ext.Component', {
region: 'north',
height: 32, // give north and south regions a height
autoEl: {
tag: 'div',
html:'<p>north - generally for menus, toolbars and/or advertisements</p>'
}
}), {
// lazily created panel (xtype:'panel' is default)
region: 'south',
contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
collapsed: true,
title: 'South',
margins: '0 0 0 0'
}, {
xtype: 'tabpanel',
region: 'east',
title: 'East Side',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [ '->', {
xtype: 'button',
text: 'test',
tooltip: 'Test Button'
}]
}],
animCollapse: true,
collapsible: true,
split: true,
width: 225, // give east and west regions a width
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
activeTab: 1,
tabPosition: 'bottom',
items: [{
html: '<p>A TabPanel component can be a region.</p>',
title: 'A Tab',
autoScroll: true
}, Ext.create('Ext.grid.PropertyGrid', {
title: 'Property Grid',
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
"tested": false,
"version": 0.01,
"borderWidth": 1
}
})]
}, {
region: 'west',
stateId: 'navigation-panel',
id: 'west-panel', // see Ext.getCmp() below
title: 'West',
split: true,
width: 200,
minWidth: 175,
maxWidth: 400,
collapsible: true,
animCollapse: true,
margins: '0 0 0 5',
layout: 'accordion',
items: [{
contentEl: 'west',
title: 'Navigation',
iconCls: 'nav' // see the HEAD section for style used
}, {
title: 'Settings',
html: '<p>Some settings in here.</p>',
iconCls: 'settings'
}, {
title: 'Information',
html: '<p>Some info in here.</p>',
iconCls: 'info'
}]
},
// in this instance the TabPanel is not wrapped by another panel
// since no title is needed, this Panel is added directly
// as a Container
Ext.create('Ext.tab.Panel', {
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
items: [{
contentEl: 'center1',
title: 'Close Me',
closable: true,
autoScroll: true
}, {
contentEl: 'center2',
title: 'Center Panel',
autoScroll: true
}]
})]
});
// get a reference to the HTML element with id "hideit" and add a click listener to it
Ext.get("hideit").on('click', function(){
// get a reference to the Panel that was created with id = 'west-panel'
var w = Ext.getCmp('west-panel');
// expand or collapse that Panel based on its collapsed property state
w.collapsed ? w.expand() : w.collapse();
});
});
相关推荐
资源名称：ExtJS布局之border实例内容简介：border布局是常见的布局样式，本文档中一个实际项目的示例，比较简单，仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号，支持checkbox全选，动态选择显示哪些列...
Extjs布局实例
ExtJS布局是构建用户界面的关键部分，特别是在使用ExtJS库时。本文主要讲解ExtJS的Column布局，一种非常灵活的布局方式，可以帮助开发者创建复杂的、响应式的用户界面。 Column布局在ExtJS中用于将容器（如Panel）...
### ExtJS布局类型 #### 1. **Column Layout** 文件中的示例使用了`column`布局，这是ExtJS中的一种常用布局方式，用于将子元素按列排列。例如，在代码中，可以看到一个`Ext.Panel`对象被创建，并指定了`layout:'...
EXTJS学习，webform+mvc routeing extjs布局 适合初学者
### ExtJS布局全面讲解 #### 一、Border Layout（方位布局） **定义与特性：** - **定义**：Border布局由类`Ext.layout.BorderLayout`定义，布局名称为`border`，这是一种非常实用且常见的布局方式，适用于创建...
### ExtJS布局管理学习指南 #### 一、引言 ExtJS是一款强大的JavaScript框架，用于构建复杂的前端应用程序。其中布局管理是ExtJS的核心特性之一，它可以帮助开发者有效地组织UI组件，使得用户界面既美观又实用。...
Extjs 布局生成器，可以生产各布局查看布局代码
资源名称：ExtJS布局之border实例 中文WORD版内容简介：border布局是常见的布局样式，本文档中一个实际项目的示例，比较简单，仅供初学者参考。感兴趣的朋友可以过来看看资源截图： 资源太大，传百度网盘了，链接在...
收集到的Extjs 布局，有兴趣朋友快来看看
很好的ext页面布局自动生成功能，快速布局，减少你页面开发时间！用法：解压->添加文件夹到一个web工程当中->进入index.html进入页面编辑就可以自由设计你的布局了，代码在查看/修改中可以看到，只需复制粘贴到自己...
自己写的ext布局。请下载的朋友注意目录的结构。否则可能不能运行。 关于内容和需求请参看文章：http://blog.csdn.net/sunxing007/archive/2009/03/17/3999705.aspx#1444224和需求：...
以下是关于ExtJS布局的详细解释： 1. **基本知识：布局操作** - 布局操作涉及容器组件内的子元素组件如何组织和分布。 - 布局的基类是`Ext.layout.ContainerLayout`，它提供了所有布局的基础功能，但本身并不具有...
### Extjs布局详解 在深入探讨Extjs布局之前，我们先简单回顾一下Extjs是什么。Extjs是一款基于JavaScript的企业级富客户端应用框架，它提供了一系列的UI组件和强大的数据处理能力，使得开发者能够构建出高性能的...
在本篇博客中，我们将聚焦于"accordion布局"这一特性，它是ExtJS布局系统中的一种特殊形式。 Accordion布局，又称为折叠面板布局，允许在一个容器内放置多个面板，这些面板会像手风琴一样展开和折叠。这种布局模式...
第八讲.EXtJS布局模式-Auto布局、Fit布局、Accordion布局 第九讲.ExtJS布局模式-Card、Anchor、Absolute 第十讲.ExtJS布局模式-Column、Table、Border 第十一讲.ExtJS布局模式-Box布局、使用ViewPort布局首页 第...
以上介绍的只是Extjs布局管理中的一小部分，Extjs官网提供了丰富的例子和详细的文档，这是学习Extjs布局的最佳资源。通过官网的例子，可以直观地看到不同布局类型的效果和配置方法，极大地便利了开发者的布局实践和...
想学Extjs吗 这是一个学习Extjs复杂布局的源码 很不错哦！