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 帗局使用指南 #### 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、付费专栏及课程。

余额充值