前言

[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. 用CSS3绘制图形

    参考资料:http://blog.csdn.net/fense_520/article/details/37892507 本文非转载,为个人原创,转载请先联系博主,谢谢~ 准备: <!DOCTY ...

  2. how to install git 1.8 rpm

    git版本在低于1.8之前,对于私有项目会出现401的pull失败错误,只能通过升级git版本来解决 It appears that git18 is no longer available from ...

  3. SilverlightLoader使用托管代码创建自定义载入界面及动态加载XAP

    Silverlight实现动态加载xap和Splash Screen.收藏! 内容来自 http://silverlightchina.net/html/tips/2010/0115/588.html

  4. 升级linux内核(2.6.32->3.10.81)，安装docker

    1.内核升级环境准备 #查看已经安装的和未安装的软件包组,来判断我们是否安装了相应的开发环境和开发库: yum grouplist #一般是安装这两个软件包组,这样做会确定你拥有编译时所需的一切工具 ...

  5. 解密电子书之三：MCU（君正）

    汉王科技,早先使用的是Marvell的Xscal(ARM架构).而后据说出于功耗与价格的考虑,汉王旗下的全线产品,除了双品牌的T61(ALEX)以外,都使用北京君正提供的产品.君正的4740,基于MI ...

  6. C++中输入输出流及文件流操作笔记

    1.流的控制 iomanip          在使用格式化I/O时应包含此头文件.    stdiostream   用于混合使用C和C + +的I/O机制时,例如想将C程序转变为C++程序 2.类 ...

  7. 编程珠玑I算法总结

    主要是根据编程珠玑后面的Algorithm附录总结了一下这本书里面的经典算法. 1 辗转相减求最大公约数 思想:最大公约数能整除i和j,则其一定也能整除i-j(if i>j) int gcd(i ...

  8. CodeForces 135C C. Zero-One

    题目 题意: 一个01串,AB两个人轮流删去一个字符,直到只剩两个,A先手.最后剩的两位组成一个二进制数,A要使其最小,B要使其最大. 有一些部分不知道原来是什么,用?表示,求所有的可能里,最后剩下的 ...

  9. Data visualization 课程 笔记3

    Learn how humans work to create a more effective computer interface 三种reasoning的方式  Deductive Reason ...

  10. Ubuntu14.04 Server Apache2+subversion环境搭建

    自从工作后,发现之前的代码开发太随便啦,于是经过不到两年的工作积累,打算在自己开发软件的过程中好好管理自己的项目.于是打算搭建自己的项目服务器,去年搭建过一次,但是由于没有记录,现在需要再来一遍,好多 ...