Extjs-布局

最新推荐文章于 2020-12-01 07:56:29 发布
最新推荐文章于 2020-12-01 07:56:29 发布
阅读量2.2k 收藏 2
点赞数
分类专栏： Extjs 文章标签： layout wizard stylesheet html button border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itlwc/article/details/7867604
版权

1.在Ext中布局都是从Ext.Container开始的

Ext.Container的父类是Ext.BoxComponentExt.BoxComponent是一个盒子组件

2.Ext.layout.FitLayout

FitLayout只适合使用一个组件,自动适应页面大小,在items中不要使用autoHeight参数,否则FitLayout会失效
3. Ext.layout.BorderLayout
 
如果要实现东西南北中5部分就要使用BorderLayout,region = center 绝对不可以省略
3.1.设置子区域的大小 
使用width和height参数可以设置区域大小,North和south值只可以设置高度,East和west值只可以设置宽度,在BorderLayout中不要使用autoHeight
3.2.使用split并限制它的范围 
Split 允许用户拖动改变大小,设置拖动最大和最少minSize和maxSize 这两个都要与split相结合

3.3. 子区域的展开和折叠

//True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条
collapsible : true,

4.Ext.layout.Accordion伸缩菜单的布局

4.1.效果图

 

4.2.代码

<%@ page language="java"  pageEncoding="UTF-8"%>
<%	String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/PagingMemoryProxy.js"></script>
	<script type="text/javascript" defer>
		Ext.onReady(function(){
			var tabs = new Ext.TabPanel({
				region : 'center',
				margins : '3 3 3 0',//距离top、right、bottom、left边界的距离,单位为像素
				activeTab : 0,
				defaults : {
					autoScroll : true
				},
				items : [{
					title : '默认',
					html : '内容'
				}]
			});
			
			var panel = new Ext.Panel({
				title : '导航',
				region : 'west',
				split : true,
				width : 200,
				//True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条
				collapsible : true,
				margins : '3 0 3 3',
				cmargins : '3 3 3 3',
				layout : 'accordion',
				layoutConfig : {
					titleCollapse : true,//单击标题就可以折叠面板
					animate : true,//展开的效果
					activeOnTop : true//是否可以改变顺序
				},
				items : [{
					title : '第一栏'
				},{
					title : '第二栏'
				},{
					title : '第三栏'
				}]
			});
			
			new Ext.Viewport({
				layout : 'border',
				items : [panel,tabs]
			});
		});
	</script>
  </head>
  <body>
  </body>
</html>

5.Ext.layout.CardLayout操作向导的布局

CardLayout可以看作是一叠卡片,这种布局最适合操作向导

5.1.效果图

5.2.代码

<%@ page language="java"  pageEncoding="UTF-8"%>
<%	String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/PagingMemoryProxy.js"></script>
	<script type="text/javascript" defer>
		Ext.onReady(function(){
			var navHandler = function(direction){
		        var wizard = Ext.getCmp('wizard').layout;
		        var prev = Ext.getCmp('move-prev');
		        var next = Ext.getCmp('move-next');
		        
		        //对页面元素生成唯一id
		        var activeId = wizard.activeItem.id;
		        if (activeId == 'card-0') {
		            if (direction == 1) {
		                //设置布局中某项为活动项
		                wizard.setActiveItem(1);
		                prev.setDisabled(false);
		            }
		        } else if (activeId == 'card-1') {
		            if (direction == -1) {
		                //设置布局中某项为活动项
		                wizard.setActiveItem(0);
		                 //组件禁用
		                prev.setDisabled(true);
		            } else {
		                //设置布局中某项为活动项
		                wizard.setActiveItem(2);
		                 //组件禁用
		                next.setDisabled(true);
		            }
		        } else if (activeId == 'card-2') {
		            if (direction == -1) {
		                //设置布局中某项为活动项
		                wizard.setActiveItem(1);
		                //组件不禁用
		                next.setDisabled(false);
		            }
		        }
		    };
			new Ext.Viewport({
				layout : 'border',
				items : [{
					id : 'wizard',
					title : '向导',
					region : 'west',
					split : true,//可拖放
					width : 200,
					layout : 'card',
					bodyStyle : 'padding:15px',
					activeItem : 0,
					defaults : {
						border : false
					},
					bbar : [{
						id : 'move-prev',
						text : '上一步',
						//这个方法的作用是返回一个匿名方法的引用,通常用来改变作用域
						handler : navHandler.createDelegate(this,[-1]),
						disabled : true
					},'->',{
						id : 'move-next',
						//这个方法的作用是返回一个匿名方法的引用,通常用来改变作用域
						handler : navHandler.createDelegate(this,[1]),
						text : '下一步'
					}],
					items : [{
						id : 'card-0',
						html : '哈哈<br/>欢迎向导<br/>第一步,共三步'
					},{
						id : 'card-1',
						html : '第二步,共三步'
					},{
						id : 'card-2',
						html : '恭喜,完成了<br/>第三步,共三步'
					}]
				},{
					region : 'center',
					split : true,
					border : true
				}]
			});
		});
	</script>
  </head>
  <body>
  </body>
</html>

6.Ext.lyout.AnchorLayout和Ext.lyout.AbsoluteLayout控制位置和大小的布局

AnchorLayout既可以为items中的每个组件指定与总体布局大小的差值,也可以设置一个比例使子组件可以根据整体自行计算本身的大小

提供3中配置方式

第一种使用百分比进行配置

new Ext.Viewport({
	layout : 'anchor',
	items : [{
		title : '面板1',
		anchor : '50%,50%'//宽度50% 高度50%
	},{
		title : '面板2',
		anchor : '80%'//宽度80% 高度auto
	}]
});

第二种直接设置与右侧和底部的边距

new Ext.Viewport({
	layout : 'anchor',
	items : [{
		title : '面板1',
		anchor : '-50,-200'//右侧-50 底部-200
	},{
		title : '面板2',
		anchor : '-100'//右侧-100 底部-auto
	}]
});

第三种称为side,使用它之前为布局整体的父组件和布局内部的子组件设置好width,height和anchorSize属性

new Ext.Viewport({
	layout : 'anchor',//计算差值
	anchorSize : {
		width : 400,
		height : 300
	},
	items : [{
		title : '面板1',
		width : 200,
		height : 100,
		anchor : 'r b'//固定写法,也可以写成right buttom
	},{
		title : '面板2',
		width : 100,
		height : 200,
		anchor : 'r b'//固定写法,也可以写成right buttom
	}]
});

AnchorLayout的子组件是自上而下的,AbsoluteLayouts是AnchorLayout的子类,解决只可以自上而下的这个问题,设置x,y参数达到效果

new Ext.Viewport({
	layout : 'absolute',
	items : [{
		title : '面板1',
		x : 100,
		y : 100,
		anchor : '50% 50%'
	},{
		title : '面板2',
		x : 700,
		y : 50,
		anchor : '80%'
	}]
});

7.Ext.layout.FormLayout 表单专用的布局

FormLayout是AnchorLayout的一个子类,可以在anchor设置宽和高的比例,但他还是主要用于对表单进行布局,他是formPanel的默认布局


8.Ext.layout.ColumnLayout分列式的布局

new Ext.Viewport({
	layout : 'column',
	items : [{
		title : '面板1',
		width : 200
	},{
		title : '面板2',
		columnWidth : .3
	},{
		title : '面板3',
		columnWidth : .7
	}]
});

9.Ext.layout.BoxLayout

new Ext.Viewport({
	layout : {
		type : 'hbox',
		padding : '5',
		align : 'stretch'//自动设置外部容器大小
	},
	items : [{
		xtype : 'button',
		flex : 1,//属性越大占据空间越大
		text : 'button1'
	},{
		xtype : 'button',
		flex : 2,//属性越大占据空间越大
		text : 'button1'
	}]
});

10.Ext.layout.TabelLayout表格状的布局

 

itlwc
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
5.2.3 Ext JS如何实现动态改变树节点的字体颜色
oscar999的专栏
03-15 507
有时候有需要修改某个或者某些节点的样式， 比如某些节点的字体加粗，或者改变某些节点的颜色。
ExtjS--accordion布局
03-26
在本篇博客中，我们将聚焦于"accordion布局"这一特性，它是ExtJS布局系统中的一种特殊形式。 Accordion布局，又称为折叠面板布局，允许在一个容器内放置多个面板，这些面板会像手风琴一样展开和折叠。这种布局模式...
extjs里面的split：true
liyanlei的专栏
03-10 3713
如果为true，在与相邻的区域之间显示一个 Ext.SplitBar ， 让用户可以动态地改变区域的大小(默认值为 false)。 当split == true时， 一般情况下需要指定minSize和maxSize参数， 以便BoxComponent可以重绘此区域。  这些参数不是BoxComponent本身的参数， 而是仅仅在这个类（译者注：指BorderLayout.Region）
EXT JS 面板布局
枫的专栏
01-22 496
Panel布局类有12种。(auto：自动布局，fit：自适应布局，accordion：折叠布局，card：卡片式布局，anchor锚点布局，absolute，绝对位置布局， checkboxgroup：复选框组件布局，column列布局，table：表格布局，border：边框布局，box：盒布局。 先来个最常用的viewPort+border。 Ext.onReady(function(
ExtJS的使用方法汇总(5)——布局
热门推荐
薛敬明的专栏
09-15 1万+
所谓布局，简单来说就是决定把什么东西放到什么位置上，对于管理软件来说，一般都是首部放标题，左边放菜单栏，空余的右下方用来显示具体的内容。本章将详细介绍EXT中布局的用法。 一、传统的布局方式 我们可以用Ext.Viewport类对整个页面进行整体布局，具体使用方法如下： var viewport=new Ext.Viewport({ layout:'borde
ExtJs4 笔记（14） layout 布局
weixin_30699831的博客
12-27 131
《回到系列目录 本篇讲解Ext另一个重要的概念：布局。一般的容器类控件都是通过配置项items添加子控件的，这些子控件相对于父控件怎么定位呢，这里就要用到布局。某些容器类控件，它本身默认就集成了一种布局方式，例如比较典型的是：Ext.container.Viewport 布局控件，它其实就是一个border布局的容器，还有Ext.form.Panel、Ext.tab.Panel等。本节我们系...
extjs-7.0.0-gpl
08-06
3. **响应式设计**：ExtJS 7.0.0支持多设备和屏幕尺寸的响应式布局，确保应用程序在桌面、平板电脑和手机上都能正常运行，适应不同的视口大小。 4. **性能优化**：新版本提升了框架的运行效率，包括更快的应用程序...
extjs-620-docs.rar完全离线版
03-28
ExtJS 的核心特性包括组件化设计、数据绑定、丰富的UI组件、强大的表单处理、灵活的布局管理以及响应式设计。在6.2.0 版本中，这些方面可能有所增强和完善： 1. **组件系统**：ExtJS 采用组件化开发模式，允许...
ExtJs常用布局--layout详解实例代码
05-23
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
extjs-theme-bootstrap
07-26
EXTJS4 是 Sencha 公司推出的一款强大的 JavaScript 框架，专为构建富客户端 Web 应用程序而设计。它提供了丰富的组件库、数据管理、强大的图表以及灵活的布局系统，使得开发者能够轻松创建功能丰富的交互式界面。...
EXT的Viewport的layout为border，其west的panel为split:true，但在IE6中并不能改变其大小
中国风的专栏
09-18 8453
两种解决方式：一种是加一个CSS补丁:.ext-strict .ext-ie6 .x-layout-split{background-color: #dfe8f6;}另一种是在viewport里只加一个region为center的Panel，把该Panel的layout设为border，然后再在该panel里布局具体的内容。推荐使用第一种方式。第二种增加一层容器，运行速度会有影响。
Extjs--12种布局方式
weixin_30755709的博客
09-29 654
按照Extjs的4.1的文档来看，extjs的布局方式大致有12种，下面一一介绍，有些代码就是文档中的。 1.Border 边界布局 border布局，最多可以将页面分割为“东南西北中”五部分，是最常用的一种布局方式。我们可以根据项目的实际需求保留其中的部分区域，而将其他部分隐藏掉。 1.1效果图预览 1.2 代码demo Ext....
extjs SplitButton点击文本显示下拉菜单
嘻嘻哈哈的专栏
01-16 4319
splitButton.on('click',function(btn){ splitButton.menu.showAt([btn.getXY()[0], btn.getXY()[1] + btn.getHeight()]); })
ExtJS的使用方法汇总5——布局
孤雁是天的寂寞
01-11 173
所谓布局，简单来说就是决定把什么东西放到什么位置上，对于管理软件来说，一般都是首部放标题，左边放菜单栏，空余的右下方用来显示具体的内容。本章将详细介绍EXT中布局的用法。 一、传统的布局方式 我们可以用Ext.Viewport类对整个页面进行整体布局，具体使用方法如下： [c-sharp] view plaincopy varviewport=newExt.Vi...
EXTJS7 可拖拉布局分割条
路过君的博客
04-08 505
... items: [{ // 需要使用panel才能生效 xtype: 'panel', docked: 'left', // 分割条在左边栏panel的右侧 resizable: {split: true, edges: 'east'} },{...}] ...
谈谈Ext JS的组件——布局的使用方法
weixin_34033624的博客
06-24 191
概述 在Ext JS中，包含两类布局：组件类布局和容器类布局。由于有些组件是有不同的组件组合而成的，如字段就由标题和输入框构成，他们之间也是存在布局关系的，而这就需要组件类布局来处理组件内自己特有的布局关系。如果我们不定义自己的组件，基本不需要使用到组件布局，知道就行了。本文主要介绍的是容器类布局，因为这个在开发中是必定会使用到的。 注意：在Ext JS中，字段有两层意思...
Extjs真是十分贴心，十分强大
walle的博客
02-04 973
看这二级表头、三级联动表格多帅 /** * aporro产品统计报表 */ Ext.define("PSI.Report.AporroProductReportForm", { extend: "PSI.AFX.BaseMainExForm", initComponent: function () { var me = this;
extjs中滚动条属性_前端学习随笔6 盒模型及相关属性
weixin_39965283的博客
12-01 157
注：测试浏览器版本号——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。一 心得体会最大的收获是第一次知道了outline(轮廓)这个属性，之前都没有使用过，所以没有注意到这个属性，还有就是对(display)显示类型有了一个新的认识，除了常用的一些显示类型，还有很多其他独特的显示类型，这为我们页面布局提供了很多新的选择。在这里...
extjs from布局怎么设置column宽度
最新发布
05-11
在 ExtJS 中使用布局的方式来设置 column 的宽度，可以使用 columnWidth 属性。 columnWidth 是一个相对值，它表示该列在父容器中所占的比例。例如，如果有两个列，一个 columnWidth 设置为 0.3，另一个设置为 0.7...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值