前言

[Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 （tab）

在上一篇中，中间的tab 区块无法自动伸展的原因一句话说就是： 使用contentEL的方式，相关HTML元素不会参与组件使用的布局方案。

但是在实际的开发过程中， 有时后这种方式可能无法避免， 或者说已经开发的代码，如何最简单的修正这个问题。

解决方法

利用center 区块的resize 事件可以解决这个问题。

因为在左边收合时，会触发center 区块的resize. 贴代码：

<html>

<head>

<title>Complex Layout</title>

<!-- GC -->

<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="extjs/ext-all.js"></script>

<link

	href="extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css"

	rel="stylesheet" type="text/css" />

<script type="text/javascript">

	Ext.require([ '*' ]);

Ext.onReady(function() {

	Ext.QuickTips.init();

	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>'

													}

												}),

								{

									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'

											} ]

								}, {

									region : 'center',

									width : '100%',

									height : '100%',

									layout : 'fit',

									contentEl : 'maintabs',

									listeners: {

										resize: function(thisObj,iWidth, iHeight, oldWidth, oldHeight)

		                                {

											var tabPanel = Ext.getCmp("tabPanel");

	                                        if (tabPanel!=null)

	                                        {

	                                        	tabPanel.doLayout();

	                                        }

		                                }

									}

								} ]

					});

	Ext.create('Ext.tab.Panel', {

		id: 'tabPanel',

		region : 'center', // a center region is ALWAYS required for border layout

		deferredRender : false,

		activeTab : 0, // first tab initially active

		renderTo : 'maintabs',

		layout : 'fit',

		items : [ {

			contentEl : 'center1',

			title : 'Close Me',

			layout : 'fit',

			closable : true,

			autoScroll : true

		}, {

			contentEl : 'center2',

			title : 'Center Panel',

			autoScroll : true

		} ]

	});

});

</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="maintabs" class="x-hide-display"></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>

（备注：相关的js 和 CSS需导入）

以上生效的代码是：

listeners: {

    resize: function(thisObj,iWidth, iHeight, oldWidth, oldHeight)

                         {      

        var tabPanel = Ext.getCmp("tabPanel");

                                if (tabPanel!=null)

                                {

                                    tabPanel.doLayout();        

                                }

                         }

}

在触发resize 时，对tab panel进行doLayout.

延伸

如果tab 中不是简单的html ，而是其他的Ext Component 的话，  有可能会出现tab 的头部展开了，但是子的Component的宽度没有自动伸展。

这时需调用Component 的setWidth设置一下就可以了。

[Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 （tab）的更多相关文章

  1. 【翻译】探究Ext JS 5和Sencha Touch的布局系统

    原文:Exploring the Layout System in Ext JS 5 and Sencha Touch 布局系统是Sencha框架中最强大和最有特色的一个部分. 布局要处理应用程序中每 ...

  2. 【翻译】在Ext JS和Sencha Touch中创建自己定义布局

    原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...

  3. 谈谈Ext JS的组件——容器与布局

    概述 在页面中,比较棘手的地方就是布局.而要实现布局,就得有能维护布局的容器.可以说,在我试过和使用过的Javascript框架中,Ext JS的布局是做得最棒的一个,而这得益于它强大的容器类和丰富的 ...

  4. 【翻译】在Ext JS和Sencha Touch中创建自定义布局

    原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...

  5. Ext JS添加子组件的误区

    经常会有人问我,为什么我的Grid不能岁窗口的变得而自动调整.了解后,发现很多人都习惯在渲染子组件的时候将Gird渲染到容器内的一个div里,而这正是问题的所在. 在Ext JS的布局系统中,能控制到 ...

  6. [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)

    前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件  ==> “2. 每年的周数从(1-52), 如果超过52 周 ...

  7. 谈谈Ext JS的组件——布局的用法

    概述 在Ext JS中.包括两类布局:组件类布局和容器类布局.由于有些组件是有不同的组件组合而成的,如字段就由标题和输入框构成,他们之间也是存在布局关系的,而这就须要组件类布局来处理组件内自己特有的布 ...

  8. 谈谈Ext JS的组件——布局的用法续二

    绝对布局(Ext.layout.container.Absolute) 绝对布局让我回忆到了使用Foxpro开发的时候,哪时候的界面布局就是这样.通过设置控件的左上角坐标(x.y)和宽度来进行的,由于 ...

  9. [Ext JS 4] 实战之 Picker 和 Picker Field

    前言 所谓的picker , 就是弹出一个选择框,让你选择一些信息.比如选择日期, 选择颜色等: 选择的结果总是要放在一个地方的,Picker Field 就是用来放置选择结果的一个文本框. 在Ext ...

随机推荐

  1. [原创]linux简单之美（三）

    原文链接:linux简单之美(三) 在linux简单之美(二)中我们尝试使用了C库的函数完成功能,那么能不能用syscall方式来搞呢?显然可以! section .data ft db sectio ...

  2. 什么是位、字节、字、KB、MB

    什么是位.字节.字.KB.MB 位:"位(bit)"是电子计算机中最小的数据单位.每一位的状态只能是0或1. 字节:8个二进制位构成1个"字节(Byte)",它 ...

  3. Delphi判断一个文件是不是JPG图片

    判断头几个字节: function IsJpegFile(FileName: string): Boolean; const RightBuf : ..] of Byte = ($FF,$D8,$FF ...

  4. elk之nginx

    elk之nginx: ignore_older => 86400,不处理一天以前的文件. zjtest7-frontend:/usr/local/logstash-2.3.4/config# c ...

  5. Linux-storage-stack-diagram

    just a diagram 一目了然. 对于isci 只是用过LIO和STGT 两种后端. 这里有各种后端的比较. http://scst.sourceforge.net/comparison.ht ...

  6. centos6.5 openvpn安装配置

    http://m.jb51.net/?host=www.jb51.net&src=http%3A%2F%2Fwww.jb51.net%2Fsoftjc%2F150885.html

  7. Oracle - index （索引）

        索引: 一种独立于表的模式对象, 可以存储在与表不同的磁盘或表空间中 @ 索引被删除或损坏, 不会对表产生影响, 其影响的只是查询的速度 @ 索引一旦建立, Oracle 管理系统会对其进行自 ...

  8. MFC的命令行

    一个程序,我们通过输入不同的命令行参数,就可以实现一个可执行文件,多种功能,通过命令行来控制它的行为,例如,我们在控制台的时候,就是遇到最多的,如一个exe程序,加入为test..exe,我们可以设置 ...

  9. Android开发10.3：UI组件GridView网格视图

    GridView(网格视图) 概述 GridView用于在界面上按行.列分布的方式来显示多个组件         GridView和ListView有共同的父类 : AbsListView       ...

  10. iOS-BLE蓝牙开发

    Demo地址:WEBlueToothManager 在写这个博客之前,空余时间抽看了近一个月的文档和Demo,系统给的解释很详细,接口也比较实用,唯独有一点,对于设备 的唯一标示,网上众说纷纭,在这里 ...