Extjs4.2 布局详解—Card布局

最新推荐文章于 2022-09-17 11:32:05 发布

IT码农-爱吃辣条

最新推荐文章于 2022-09-17 11:32:05 发布

阅读量1.2w

点赞数

文章标签：布局 extjs4 开发人员

本文链接：https://blog.csdn.net/qq_24504591/article/details/78621847

版权

您可以使用卡布局来创建自己的自定义向导式屏幕。布局是一个标准的CardLayout，底部有一个工具栏，开发者必须提供实现向导业务逻辑的导航功能（请参阅basic.js中的代码以获取详细信息）。

此布局管理多个子组件, 每个都完全填满父容器, 而每次仅显示一个. 此布局样式多用于向导, 实现标签页布局等等. 此类应该通过`layout:'card' Ext.container.Container.layout属性来扩展和创建, 通常不需要直接通过类名关键字来创建.

CardLayout的核心方法是setActiveItem. 因为一次只能够显示一个面板, 从一个组件切换到另一个的唯一方式就是调用setActiveItem传入目标面板(或ID或索引). 布局本身并不提供任何用户交互界面来处理这种切换, 必须由开发人员来实现.

通过调用布局的setActiveItem方法, 来实现切换容器中当前显示的面板:

下面是本人写的代码：按钮可以禁止，防止再次点击

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Cord布局</title>
		<link rel="stylesheet" href="./ext-4.2.1.883/resources/css/ext-all.css">
		<script src="./ext-4.2.1.883/ext-all.js"></script>
		<script src="./ext-4.2.1.883/locale/ext-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="box"></div>
		<script type="text/javascript">
			Ext.onReady(function() {
				var panel = Ext.create('Ext.Window', {
					autoShow: true,
					title: 'window',
					width: 420,
					height: 400,
					layout: 'card',
					activeItem: 0,
					bbar: [
						'->',
						{
							id: 'card-prev',
							text: '«上一页',
							handler: function() {
								navigate('prev')
							}
						},
						{
							id: 'card-next',
							text: '下一页»',
							handler: function() {
								navigate('next')
							}
						}
					],
					items: [{
						id: 'card1',
						html: '第一页'
					}, {
						id: 'card2',
						html: '第二页'
					}, {
						id: 'card3',
						html: '第三页'
					}]
				});

				function navigate(direction) {
					var layout = panel.getLayout();
					if(!(direction === 'prev' && layout.layoutCount === 1)) {
						layout[direction]();
						Ext.getCmp('card-prev').setDisabled(!layout.getPrev());
						Ext.getCmp('card-next').setDisabled(!layout.getNext());
					}
				};
			});
		</script>
	</body>

</html>

如果你不想按钮被禁止，可以将函数navigate换成以下的：

function navigate(direction) {
					var layout = panel.getLayout();
					//					console.log(layout.getNext());
					if(layout.getPrev() && direction === 'prev') {
						layout.prev();
					} else if(layout.getNext() && direction === 'next') {
						layout.next();
				}
			};

IT码农-爱吃辣条

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Extjs4.2 布局详解—Card布局

您可以使用卡布局来创建自己的自定义向导式屏幕。布局是一个标准的CardLayout，底部有一个工具栏，开发者必须提供实现向导业务逻辑的导航功能（请参阅basic.js中的代码以获取详细信息）。此布局管理多个子组件, 每个都完全填满父容器, 而每次仅显示一个. 此布局样式多用于向导, 实现标签页布局等等. 此类应该通过`layout:'card' Ext.container.Contai
复制链接

扫一扫