Extjs布局

最新推荐文章于 2025-06-11 15:17:07 发布
最新推荐文章于 2025-06-11 15:17:07 发布
阅读量470 收藏 1
点赞数 1
分类专栏： Extjs相关

Ext.js 绝对布局

absolute
<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function() {
         Ext.create('Ext.container.Container', {
            renderTo: Ext.getBody(),
            layout: 'absolute' ,
            items: [{
               title: 'Panel 1',
               x: 50,
               y: 50,
               html: 'Positioned at x:50, y:50',
               width: 500,
               height: 100
            },{
               title: 'Panel 2',
               x: 100,
               y: 95,
               html: 'Positioned at x:100, y:95',
               width: 500,
               height: 100
            }]
         });
      });
   </script>
</head>
<body>
</body>
</html>

运行效果：

Ext.js  accordion布局

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function() {
         Ext.create('Ext.container.Container', {
            renderTo : Ext.getBody(),
            layout : 'accordion' ,
            width : 600,
            items : [{
               title : 'Panel 1',
               html : 'Panel 1 html content'
            },{
               title : 'Panel 2',
               html : 'Panel 2 html content'
            },{
               title : 'Panel 3',
               html : 'Panel 3 html content'
            },{
               title : 'Panel 4',
               html : 'Panel 4 html content'
            },{
               title : 'Panel 5',
               html : 'Panel 5 html content'
            }]
         });
      });
   </script>
</head>
<body>
</body>
</html>

运行效果：

Ext.js   

anchor 布局
<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function() {
         Ext.create('Ext.container.Container', {
            renderTo : Ext.getBody(),
            layout : 'anchor' ,
            width : 600,
            items : [{
               title : 'Panel 1',
               html : 'panel 1',
               height : 100,
               anchor : '50%'
            },{
               title : 'Panel 2',
               html : 'panel 2',
               height : 100,
               anchor : '100%'
            },{
               title : 'Panel 3',
               html : 'panel 3',
               height : 100,
               anchor : '-100'
            },{
               title : 'Panel 4',
               html : 'panel 4',
               anchor : '-70, 500'
            }]
         });
      });
   </script>
</head>
<body>
</body>
</html>

运行效果：

Ext.js

border布局
<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function() {
         Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            height: 300,
            width: 600,
            layout:'border',
            defaults: {
               collapsible: true,
               split: true,
               bodyStyle: 'padding:15px'
            },
            items: [{
               title: 'Panel1',
               region:'west',
               html: 'This is Panel 1'
            },{
               title: 'Panel2',
               region:'center',
               html: 'This is Panel 2'
            },{
               title: 'Panel3',
               region: 'south',
               html: 'This is Panel 3'
            },{
               title: 'Panel4',
               region: 'east',
               html: 'This is Panel 4'
            },{
               title: 'Panel5',
               region: 'north',
               html: 'This is Panel 5'
            }]
         });
      });
   </script>
</head>
<body>
</body>
</html>

运行效果：

Card(TabPanel)

此布局以制表符方式排列不同的组件。 选项卡将显示在容器的顶部。每次只有一个选项卡可见，每个选项卡被视为不同的组件

<!DOCTYPE HTML>
<html>
<head>
	<title>absoluteHtmlTest</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   	<script type="text/javascript">
Ext.onReady(function(){
	Ext.create('Ext.tab.Panel',{
		renderTo:Ext.getBody(),
		requires:['Ext.layout.container.Card'],
		width:600,
		height:200,
		items:[{
			title:'tab panel 1',
			html:'tab panel 1 content'
		},{
			title:'tab panel 2',
			html:'tab panel 2 content'
		},{
			title:'tab panel 3',
			html:'tab panel 3 content'
		}]
	});
});

   	</script>
</head>
<body>
</body>
</html>

效果如下：

 

Card(Wizard)

在这个布局中，每次元素来到完整的容器空间。 向导中将有一个底部工具栏用于导航。

<!DOCTYPE HTML>
<html>
<head>
	<title>absoluteHtmlTest</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   	<script type="text/javascript">
 		Ext.onReady(function(){
 			Ext.create('Ext.panel.Panel',{
 				renderTo:Ext.getBody(),
 				width:600,
 				height:200,
 				//勿忘layout布局属性
 				layout: 'card',
 				requires:['Ext.layout.container.Card'],
 				bodyPadding:15,
 				defaults:{
                    //隐藏内边框
 					border:false
 				},
 				defaultListenerScope:true,
//在bbar表示按钮，属性添加'->'可以让 previous和next按钮居右，必须是‘->’其他符号无效
 				bbar:['->',{
 					itemId:'card-prev',
 					text:'<< Previous',
 					handler:'showPrevious',
 					disabled:true
 				},{
 					itemId:'card-next',
 					text:'next >>',
 					handler:'showNext'
 				}],
 				items:[{
 					id:'card0',
 					html:'<h2> This is card wizard layout </h2><p> This is first card </p> <p> Please click the "Previous" button for previous card... </p>'
 				},{
 					id:'card1',
 					html:'<p> This is second card </p> <p> Please click the "Previous" button for previous card... </p>'
 				},{
 					id:'card2',
 					html:'<p> This is 3 card </p> <p> Please click the "Previous" button for previous card... </p>'
 				},{
 					id:'card3',
 					html:'<p> This is 4 card </p> <p> Please click the "Previous" button for previous card... </p>'
 				}],

 					showNext:function(){
 						this.cardPanelNavigation(1);
 					},
 					showPrevious:function(){
 						this.cardPanelNavigation(-1);
 					},

 					cardPanelNavigation:function(incr){
 						var me=this;
 						var l=me.getLayout();
 						var i=l.activeItem.id.split('card')[1];
 						var next=parseInt(i,10)+incr;
 						l.setActiveItem(next);
 						me.down('#card-prev').setDisabled(next===0);
 						me.down('#card-next').setDisabled(next===2);
 					}

 			});
 		});
   	</script>

</head>
<body>
</body>
</html>

效果如下：

Column

此布局是要在容器中显示多个列。 我们可以定义列的固定宽度或百分比宽度。 百分比宽度将基于容器的完整大小计算。

每个column的高度会根据内容的高度自动变化

<!DOCTYPE HTML>
<html>
<head>
	<title>absoluteHtmlTest</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   	<script type="text/javascript">
 		Ext.onReady(function(){
 			Ext.create('Ext.panel.Panel',{
 				renderTo:Ext.getBody(),
 				//一般只需要layout属性就可以,requires和xtype不是必须的
 				layout:'column',
 				requires:['Ext.layout.container.Column'],
 				xtype:'layout-column',
 				width:600,
 				items:[{
 					title : 'First Component width 30%',
 					html:'<p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p><p>first component content</p>',
 					//columnWidth字段不要写错，否则会出现填充不满的情况
 					columnWidth:0.30
 				},{
               title : 'Second Component width 40%',
               html : '<p> This is Second Component </p> <p> Next line for second component </p>',
               columnWidth : 0.40
            },{
               title : 'Third Component width 30%',
               html : 'This is Third Component' ,
               columnWidth : 0.30
 				}]
 			});
 		});
   	</script>

</head>
<body>
</body>
</html>

运行结果：

Fit

在此布局中，容器用单个面板填充，并且当没有与布局相关的特定要求时，则使用该布局。

适合：在此布局中，容器用单个面板填充，当没有与布局相关的特定要求时，则使用此布局。

<!DOCTYPE HTML>
<html>
<head>
	<title>absoluteHtmlTest</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   	<script type="text/javascript">
 		Ext.onReady(function(){
 			Ext.create('Ext.container.Container',{
 				renderTo:Ext.getBody(),
 				layout:{
                    //fit和auto布局看着是一样的,即使不加layout，区别？？？
 					type:'fit'
 				},
 				defaults:{
 					bodyPadding:15
 				},
 				width:600,
 				items:[{
 					title:'panel 1',
 					html:'panel 1 content'
 				},{title:'panel 2',
 					html:'panel 2 content'
 				},{
 					title:'panel 3',
 					html:'panel 3 content'
 				}]
 			});
 		});
   	</script>

</head>
<body>
</body>
</html>

运行效果：

 

Table

由于名称意味着此布局以HTML表格式在容器中排列组件。

若columns的数值大于item的数量，则item会自动向下排列，还是分三列

情况一：columns和items数量一致

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function(){
      	Ext.create('Ext.container.Container',{
      		renderTo:Ext.getBody(),
      		layout:{
      			type:'table',
      			columns:3,
      			tableAttrs:{
      				style:{
      					width:'100%'
      				}
      			}
      		},
      		width:600,
      		height:200,
      		items:[{
      			title:'panel 1',
      			html:'panel 1 content'
      		},{
      			title:'panel 2',
      			html:'panel 2 content'
      		},{
      			title:'panel 3',
      			html:'panel 3 content'
      		}]
      	});
      });
   </script>
</head>
<body>
</body>
</html>

运行结果：

情况2:colums数量小于items数量

运行结果：

带有colspan和rowspan的table布局：

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function(){
      	Ext.create('Ext.container.Container',{
      		renderTo:Ext.getBody(),
      		layout:{
      			type:'table',
      			columns:3,
      			tableAttrs:{
      				style:{
      					width:'100%'
      				}
      			}
      		},
      		width:600,
      		height:200,
      		items:[{
      			title:'panel 1',
      			html:'panel 1 content',
      			colspan:2
      		},{
      			title:'panel 2',
      			html:'panel 2 content',
      			rowspan:2
      		},{
      			title:'panel 3',
      			html:'panel 3 content'
      		},{
      			title:'panel 4',
      			html:'panel 4 content'
      		},{
      			title:'panel 5',
      			html:'panel 5 content'
      		}]
      	});
      });
   </script>
</head>
<body>
</body>
</html>

运行结果：

 

Ext.js vbox布局

vbox：这种布局允许元素以垂直方式分布。

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function(){
      	Ext.create('Ext.panel.Panel',{
      		renderTo:Ext.getBody(),
      		layout:{
      			type:'vbox',
      			//stretch伸展
      			align:'stretch'
      		},
      		requires:['Ext.layout.container.VBox'],
      		xtype:'layout-vertical-box',
      		width:600,
      		height:400,
      		frame:true,
      		items:[{
      			title:'panel 1',
      			html:'panel 1 content',
      			margin: '0 0 10 0',
      			//在vbox中flex控制向下拉伸的宽度
      			flex:1
      		},{
      			title:'panel 2',
      			html:'panel 2 content',
      			margin: '0 0 10 0',
      			flex:2
      		},{
      			title:'panel 3',
      			html:'panel 3 content',
      			margin: '0 0 10 0',
      			flex:2
      		},{
      			title:'panel 4',
      			html:'panel 4 content',
      			margin: '0 0 10 0',
      			flex:1
      		}]
      	});
      });
   </script>
</head>
<body>
</body>
</html>

运行效果：

Ext.js hbox布局

hbox：这种布局允许元素以水平方式分布。

 

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function() {
         Ext.create('Ext.panel.Panel', {
            renderTo : Ext.getBody(),
            layout : {
               type :'hbox' 
            },
            requires: ['Ext.layout.container.HBox'],
            xtype: 'layout-horizontal-box',
            width : 600,
            frame :true,
            items : [{
               title: 'Panel 1',
               html : 'Panel with flex 1',
               flex : 1
            },{
               title: 'Panel 2',
               html : 'Panel with flex 2',
               flex : 2
            },{
               title: 'Panel 3',
               width: 150,
               html : 'Panel with width 150'
            },{
               title: 'Panel 4',
               html : 'Panel with flex 1',
               flex : 1
            }]
         });
      });
   </script>
</head>
<body>
</body>
</html>

 

运行效果：

 

原文地址：https://www.w3cschool.cn/extjs/extjs_layouts.html

 

ExtJS之布局篇
Kenshin Cui's Blog
08-28 6万+
Ext布局总的来说是很灵活的，因此我觉得有必要一块探讨一下。 Ext常用的布局都在Ext.layout下，这里几乎涵盖了所有的布局方式（但是值得注意的是通常我们不是直接通过"new"来创建这些类的对象然后往里面添加控件使用，而是作为控件一个配置属性使用让Ext自动创建对应的类），满足开发者需求。那么我们就其中常用的方式逐一介绍。 Border布局 Border布局是Ext中常用布局方式（经常用到整个页面的总体布局），感觉用的几率很大。在看代码之前先熟悉一种特殊的容器ViewPort，它是对于浏览器视窗
ExtJS布局之border实例
07-22
资源名称：ExtJS布局之border实例内容简介：border布局是常见的布局样式，本文档中一个实际项目的示例，比较简单，仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号，支持checkbox全选，动态选择显示哪些列...
ExtJs布局大全
weixin_30500105的博客
09-13 153
1.Fit 布局 　　在Fit 布局中，子元素将自动填满整个父容器。注意：在fit 布局下，对其子元素设置宽度是无效的。如果在fit 布局中放置了多个组件，则只会显示第一个子元素。在Fit 布局中，子元素将自动填满整个父容器。典型的案例就是当客户要求一个window 或panel 中放置一个GRID 组件，grid 组件的大小会随着父容器的大小改变而改变。 效果图： 示例代码： E...
深入掌握ExtJS的实践指南
最新发布
weixin_28793831的博客
06-11 1084
ExtJS最初是由Jack Slocum于2006年发起的一个开源项目，其后被YAHOO收购并成为YUI组件库的一部分，现在则由Sencha公司继续维护和开发。它是基于JavaScript和HTML5的前端框架，专门用于开发跨浏览器的富互联网应用。ExtJS以提供丰富的UI组件著称，这些组件包括了数据网格（Grid）、表单、工具条以及各种交互式元素。ExtJS的显著特点包括：丰富的组件库：ExtJS提供了大量预制的、功能丰富的UI组件，支持快速开发复杂的用户界面。模块化架构。
EXTJs 布局
落日小屋
05-05 6432
FitLayout 自适应布局 FitLayout 是布局的基础类，对应面板布局配置项（layout）的名称为 fit，使用 fit 布局将使面板子元素自动充满容器，如果在当前容器中存在多个子面板则只有第一个会被显示。 Ext.onReady(function(){ //数据存储 var store = new Ext.data.SimpleStore( {
ExtJs布局详解
weixin_33862993的博客
08-28 167
序言     1、百度百科上说：ExtJs功能丰富，无人能出其右。无论是界面之美，还是功能之强，extjs都高居榜首。     2、呵呵，界面之美当是少不了布局的，这篇文章我写layout的七种布局。（extjs是4.+版本） Border布局__边界布局    这中布局是最常用的布局之一，看图                  border布局：border布局也称边界布局，他将...
【转载】EXTJS布局示例（panel，Viewport，TabPanel）
持续集成
02-05 218
原文网址：http://www.cnblogs.com/johan/archive/2011/04/11/1947982.html 面板控件panel应用         new Ext.Panel({ title:'面板头部（header）',             tbar : ['顶端工具栏(top toolbars)'],             bbar...
Extjs布局实例
04-10
Extjs布局实例
ExtJS布局之border实例中文WORD版
07-22
资源名称：ExtJS布局之border实例 中文WORD版内容简介：border布局是常见的布局样式，本文档中一个实际项目的示例，比较简单，仅供初学者参考。感兴趣的朋友可以过来看看资源截图： 资源太大，传百度网盘了，链接在...
Extjs布局本地生成器：查看与生成布局代码
通过上述内容，可以看出ExtJS布局生成器是专注于提高ExtJS布局开发效率的工具。它结合了代码生成和即时预览两大特性，极大地简化了前端开发流程，尤其是对于那些复杂的、多组件的用户界面。对于需要使用ExtJS框架来...
深入解析Extjs布局技巧与实例应用
在本知识点中，我们将详细探讨Extjs布局实例相关的内容，包括Extjs布局的基本概念、常见的布局类型以及如何在实际开发中运用这些布局。为了方便理解，我们将结合代码实例和布局的视觉效果来进行说明。 ### Extjs...
Extjs 之主界面布局
06-09
Extjs 之主界面简单布局，适合刚刚接触ext的新手学习，就一个html页面。 现在拿来分享。
EXTjs 简单布局实例
11-13
Ext 漂亮界面设计 //实例菜单树形 menuTree:new Ext.tree.TreePanel({ title:'功能菜单', region:'west', bodyStyle:'background:transparent url(images/default/panel/group-lr.gif) repeat-x 0 bottom;', id:'extExample-tree', autoScroll:true, enableDD:false,//是否支持拖拽效果 containerScroll: true,//是否支持滚动条 split:true, width: 140, rootVisible:false,//是否显示跟节点 collapseMode:'mini',//在分割线处出现按钮 collapsible: true, margins:'0 0 5 5', loader:new Ext.tree.TreeLoader({ dataUrl:'extExampleTree.json', requestMethod: 'GET' }),
ExtJs常用布局--layout详解实例代码
05-23
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 该文件含ext3.2.0压缩版，可直接运行哦！
extjs
小头猪
01-05 267
API：[url]http://jstang.cn/docs/[/url] API: [url]http://www.dojochina.com/extdoc/docs/[/url] [url]http://extjs.org.cn/[/url] [编辑本段]序言 　　2.1. 功能丰富，无人能出其右 　　无论是界面之美，还是功能之强，ext的表格控件都高居榜首。 　　单选行，多选行，...
ExtJs页面布局详解
正走向大牛的菜鸟
06-20 804
EXT标准布局类 面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就越显得凌乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。ExtJS通过提供多种布局类来为面板提供支持，主要包括如下10种： ContainerLayout（容器布局） FitLayout（自适应布局） AccordionLayout（折叠布局） CardLayo...
Ext布局
airenmin123456的博客
02-13 264
　　Ext主要包括11种标准布局方式：Auto(自动布局)、CheckboxGroup(复选框组布局)、Fit(自适应布局)、Column(列布局)、Accordion(折叠布局)、Table(表格布局)、Card(卡片式布局)、Border(边框布局)、Anchor(锚点布局)、Box(盒布局)、Absolute(绝对位置布局)。 　　一.Auto(自动布局)：默认布局方式，使用原始...
EXT标准布局类
Kunar
09-30 1280
<br />面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就越显得凌乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。ExtJS通过提供多种布局类来为面板提供支持，主要包括如下10种： <br />   ContainerLayout（容器布局） <br />   FitLayout（自适应布局） <br />   AccordionLayout（折叠布局） <br />   CardLayout（卡片式布局） <br />   AnchorL
ExtJs之Ext.form.field.TimePicker DatePicker组合框
weixin_33845477的博客
03-20 380
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;ExtJs&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;l
extjs 布局
05-15
### ExtJS 帗局使用指南 #### 1. **Fit布局** `Fit`布局是一种非常简单的布局方式，它会自动调整其唯一子项的大小以完全填充容器。这种布局适用于只需要一个主要组件的情况。 以下是 `Fit` 布局的一个简单示例： ```javascript Ext.create('Ext.container.Viewport', { layout: 'fit', items: [{ title: 'Hello Ext', html : 'Hello! Welcome to Ext JS.' }] }); ``` 此代码创建了一个视口，并通过 `Fit` 布局使其内部的内容充满整个窗口[^1]。 --- #### 2. **Border布局** `Border` 布局允许将界面划分为五个区域：北 (`north`)、南 (`south`)、东 (`east`)、西 (`west`) 和中心 (`center`)。每个区域都可以独立配置宽度或高度以及是否可拖动边界。 下面是一个典型的 `Border` 布局实例： ```javascript Ext.onReady(function(){ var viewport = new Ext.Viewport({ layout: 'border', items: [ {region:'north', title:"North Region", height:100}, {region:'south', title:'South Region', height:100}, {region:'east', title:'East Region', width:100}, {region:'west', title:'West Region', width:100}, {region:'center', title:'Center Region'} ] }); }); ``` 在此例子中，页面被分割成多个部分，每部分都有自己的标题和尺寸约束[^3]。 --- #### 3. **Card布局** `Card` 布局用于实现分步引导或者轮播效果。每次只显示其中一个子项，其他隐藏起来。开发者通常需要手动编写逻辑来切换当前活动卡片。 这里有一个完整的 `Card` 布局应用案例： ```javascript Ext.application({ name: 'HelloExt', launch: function () { var navigate = function (panel, direction) { var layout = panel.getLayout(); layout[direction](); Ext.getCmp('move-prev').setDisabled(!layout.getPrev()); Ext.getCmp('move-next').setDisabled(!layout.getNext()); }; Ext.create('Ext.panel.Panel', { title: 'Card Layout Example', width: 300, height: 202, layout: 'card', activeItem: 0, defaults: { border: false }, bbar: [{ id: 'move-prev', text: 'Previous', handler: function (btn) { navigate(btn.up("panel"), "prev"); }, disabled: true }, '-', { id: 'move-next', text: 'Next', handler: function (btn) { navigate(btn.up("panel"), "next"); } }], items: [{ id: 'card-0', html: '<h1>Step One</h1>' }, { id: 'card-1', html: '<h1>Step Two</h1>' }, { id: 'card-2', html: '<h1>Last Step</h1>' }], renderTo: Ext.getBody() }); } }); ``` 这段脚本展示了如何构建一个多步骤流程并控制导航按钮的状态变化[^2]。 --- #### 4. **Accordion布局** `Accordion` 布局主要用于侧边栏菜单设计，支持手风琴式的折叠/展开行为。每一个项目都需要定义自身的标题属性以便于交互。 下面是关于 `Accordion` 的一段示范代码： ```javascript Ext.onReady(function() { var viewport = new Ext.Viewport({ layout:'border', items:[ { region: 'west', width: 200, layout: 'accordion', layoutConfig: { titleCollapse: true, animate: true, activeOnTop: false }, items: [ { title: 'Chinese Super League', html: 'Shandong Tashan' }, { title: 'English Premier League', html: 'Manchester United' }, { title: 'Spanish La Liga', html: 'Real Madrid' } ] }, { region: 'center' } ] }); }); ``` 这个片段说明了怎样在一个区域内嵌入若干个能够相互影响的手风琴控件[^4]。 --- ### 总结 以上介绍了四种常见的 ExtJS 布局模式及其对应的实践教程。这些布局各有特色，在实际开发过程中可以根据需求灵活选用合适的方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值