前言

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

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

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

解决方法

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

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

  1. <html>
  2. <head>
  3. <title>Complex Layout</title>
  4.  
  5. <!-- GC -->
  6.  
  7. <style type="text/css">
  8. p {
  9. 	margin: 5px;
  10. }
  11.  
  12. .settings {
  13. 	background-image: url(../shared/icons/fam/folder_wrench.png);
  14. }
  15.  
  16. .nav {
  17. 	background-image: url(../shared/icons/fam/folder_go.png);
  18. }
  19.  
  20. .info {
  21. 	background-image: url(../shared/icons/fam/information.png);
  22. }
  23. </style>
  24. <script type="text/javascript"
  25. 	src="extjs/ext-all.js"></script>
  26. <link
  27. 	href="extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css"
  28. 	rel="stylesheet" type="text/css" />
  29. <script type="text/javascript">
  30. 	Ext.require([ '*' ]);
  31.  
  32. Ext.onReady(function() {
  33.  
  34. 	Ext.QuickTips.init();
  35.  
  36. 	Ext.state.Manager.setProvider(Ext
  37. 			.create('Ext.state.CookieProvider'));
  38.  
  39. 	var viewport = Ext
  40. 			.create(
  41. 					'Ext.Viewport',
  42. 					{
  43. 						id : 'border-example',
  44. 						layout : 'border',
  45. 						items : [
  46. 								// create instance immediately
  47. 								Ext
  48. 										.create(
  49. 												'Ext.Component',
  50. 												{
  51. 													region : 'north',
  52. 													height : 32, // give north and south regions a height
  53. 													autoEl : {
  54. 														tag : 'div',
  55. 														html : '<p>north - generally for menus, toolbars and/or advertisements</p>'
  56. 													}
  57. 												}),
  58. 								{
  59. 									region : 'west',
  60. 									stateId : 'navigation-panel',
  61. 									id : 'west-panel', // see Ext.getCmp() below
  62. 									title : 'West',
  63. 									split : true,
  64. 									width : 200,
  65. 									minWidth : 175,
  66. 									maxWidth : 400,
  67. 									collapsible : true,
  68. 									animCollapse : true,
  69. 									margins : '0 0 0 5',
  70. 									layout : 'accordion',
  71. 									items : [
  72. 											{
  73. 												contentEl : 'west',
  74. 												title : 'Navigation',
  75. 												iconCls : 'nav' // see the HEAD section for style used
  76. 											},
  77. 											{
  78. 												title : 'Settings',
  79. 												html : '<p>Some settings in here.</p>',
  80. 												iconCls : 'settings'
  81. 											},
  82. 											{
  83. 												title : 'Information',
  84. 												html : '<p>Some info in here.</p>',
  85. 												iconCls : 'info'
  86. 											} ]
  87. 								}, {
  88. 									region : 'center',
  89. 									width : '100%',
  90. 									height : '100%',
  91. 									layout : 'fit',
  92. 									contentEl : 'maintabs',
  93. 									listeners: {
  94. 										resize: function(thisObj,iWidth, iHeight, oldWidth, oldHeight)
  95. 		                                {
  96. 											var tabPanel = Ext.getCmp("tabPanel");
  97. 	                                        if (tabPanel!=null)
  98. 	                                        {
  99. 	                                        	tabPanel.doLayout();
  100. 	                                        }
  101. 		                                }
  102. 									}
  103. 								} ]
  104. 					});
  105.  
  106. 	Ext.create('Ext.tab.Panel', {
  107. 		id: 'tabPanel',
  108. 		region : 'center', // a center region is ALWAYS required for border layout
  109. 		deferredRender : false,
  110. 		activeTab : 0, // first tab initially active
  111. 		renderTo : 'maintabs',
  112. 		layout : 'fit',
  113. 		items : [ {
  114. 			contentEl : 'center1',
  115. 			title : 'Close Me',
  116. 			layout : 'fit',
  117. 			closable : true,
  118. 			autoScroll : true
  119. 		}, {
  120. 			contentEl : 'center2',
  121. 			title : 'Center Panel',
  122. 			autoScroll : true
  123. 		} ]
  124. 	});
  125. });
  126. </script>
  127. </head>
  128. <body>
  129. 	<!-- use class="x-hide-display" to prevent a brief flicker of the content -->
  130. 	<div id="west" class="x-hide-display">
  131. 		<p>Hi. I'm the west panel.</p>
  132. 	</div>
  133. 	<div id="maintabs" class="x-hide-display"></div>
  134.  
  135. 	<div id="center2" class="x-hide-display">
  136. 		<a id="hideit" href="#">Toggle the west region</a>
  137. 		<p>My closable attribute is set to false so you can't close me.
  138. 			The other center panels can be closed.</p>
  139. 		<p>The center panel automatically grows to fit the remaining space
  140. 			in the container that isn't taken up by the border regions.</p>
  141. 		<hr>
  142. 		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
  143. 			metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut
  144. 			nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac,
  145. 			lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero
  146. 			lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In
  147. 			pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus
  148. 			a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel
  149. 			justo in neque porttitor laoreet. Aenean lacus dui, consequat eu,
  150. 			adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non,
  151. 			ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt
  152. 			diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed,
  153. 			elementum porta, luctus in, leo.</p>
  154. 		<p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu
  155. 			sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl
  156. 			in velit. Nam congue, odio id auctor nonummy, augue lectus euismod
  157. 			nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget
  158. 			diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis
  159. 			natoque penatibus et magnis dis parturient montes, nascetur ridiculus
  160. 			mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien
  161. 			in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien.
  162. 			Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat.
  163. 			Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum
  164. 			viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
  165. 		<p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio.
  166. 			Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas
  167. 			convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id
  168. 			magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam
  169. 			vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus,
  170. 			facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar
  171. 			nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse
  172. 			elementum purus eu nisl. Nulla facilisi. Phasellus ultricies
  173. 			ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue
  174. 			vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla.
  175. 			Sed eu diam.</p>
  176. 		<p>Vestibulum ante ipsum primis in faucibus orci luctus et
  177. 			ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non
  178. 			quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede.
  179. 			Aliquam ultrices, nunc in varius mattis, felis justo pretium magna,
  180. 			eget laoreet justo eros id eros. Aliquam elementum diam fringilla
  181. 			nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien
  182. 			condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt
  183. 			eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et,
  184. 			pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium
  185. 			odio nec felis. Phasellus sagittis lacus eget sapien. Donec est.
  186. 			Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
  187. 			posuere cubilia Curae;</p>
  188. 		<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu
  189. 			lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim.
  190. 			Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a,
  191. 			cursus in, tempor sollicitudin, mauris. Aliquam mi velit,
  192. 			consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam
  193. 			mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie.
  194. 			Quisque luctus. Integer mattis. Donec id augue sed leo aliquam
  195. 			egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non
  196. 			erat. Nulla ultrices vestibulum quam.</p>
  197. 		<p>Duis hendrerit, est vel lobortis sagittis, tortor erat
  198. 			scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at
  199. 			pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante.
  200. 			Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat
  201. 			non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec
  202. 			elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac
  203. 			nulla. In risus.</p>
  204. 		<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a
  205. 			facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis
  206. 			felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse
  207. 			platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo
  208. 			tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur
  209. 			id velit ut velit varius commodo. Vestibulum ante ipsum primis in
  210. 			faucibus orci luctus et ultrices posuere cubilia Curae; Nulla
  211. 			facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse
  212. 			potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis
  213. 			elit, ac sollicitudin ipsum neque nec ante.</p>
  214. 		<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy
  215. 			consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit
  216. 			amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit.
  217. 			Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
  218. 			posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum
  219. 			sodales. Donec varius dapibus nisl. Praesent at velit id risus
  220. 			convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non,
  221. 			mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer
  222. 			adipiscing elit. Pellentesque habitant morbi tristique senectus et
  223. 			netus et malesuada fames ac turpis egestas. Etiam varius dignissim
  224. 			nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada
  225. 			enim non neque.</p>
  226. 	</div>
  227. 	<div id="center1" class="x-hide-display">
  228. 		<p>
  229. 			<b>Done reading me? Close me by clicking the X in the top right
  230. 				corner.</b>
  231. 		</p>
  232. 		<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu
  233. 			lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim.
  234. 			Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a,
  235. 			cursus in, tempor sollicitudin, mauris. Aliquam mi velit,
  236. 			consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam
  237. 			mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie.
  238. 			Quisque luctus. Integer mattis. Donec id augue sed leo aliquam
  239. 			egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non
  240. 			erat. Nulla ultrices vestibulum quam.</p>
  241. 		<p>Duis hendrerit, est vel lobortis sagittis, tortor erat
  242. 			scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at
  243. 			pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante.
  244. 			Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat
  245. 			non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec
  246. 			elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac
  247. 			nulla. In risus.</p>
  248. 		<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a
  249. 			facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis
  250. 			felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse
  251. 			platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo
  252. 			tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur
  253. 			id velit ut velit varius commodo. Vestibulum ante ipsum primis in
  254. 			faucibus orci luctus et ultrices posuere cubilia Curae; Nulla
  255. 			facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse
  256. 			potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis
  257. 			elit, ac sollicitudin ipsum neque nec ante.</p>
  258. 		<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy
  259. 			consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit
  260. 			amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit.
  261. 			Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
  262. 			posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum
  263. 			sodales. Donec varius dapibus nisl. Praesent at velit id risus
  264. 			convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non,
  265. 			mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer
  266. 			adipiscing elit. Pellentesque habitant morbi tristique senectus et
  267. 			netus et malesuada fames ac turpis egestas. Etiam varius dignissim
  268. 			nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada
  269. 			enim non neque.</p>
  270. 	</div>
  271. 	<div id="props-panel" class="x-hide-display"
  272. 		style="width: 200px; height: 200px; overflow: hidden;"></div>
  273. 	<div id="south" class="x-hide-display">
  274. 		<p>south - generally for informational stuff, also could be for
  275. 			status bar</p>
  276. 	</div>
  277. </body>
  278. </html>

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

以上生效的代码是：

  1. listeners: {
  2.     resize: function(thisObj,iWidth, iHeight, oldWidth, oldHeight)
  3.                          {      
  4.         var tabPanel = Ext.getCmp("tabPanel");
  5.                                 if (tabPanel!=null)
  6.                                 {
  7.                                     tabPanel.doLayout();        
  8.                                 }
  9.                          }
  10. }

在触发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. HTTP协议中keep-alive

    一 . http协议是有连接的协议,这样每一个连接过来都要重新打开一个tcp的http socket,短期内同一个host 对服务器的请求就会很慢,若是能够保持住连接,就可以节省socket open ...

  2. struts2笔记01-环境搭建

    1.官网下载struts2 struts-2.3.28-all.zip,这个包可谓应有尽有,以后全靠它了! 2.jar包怎么选?       (1)struts-2.3.28-all\struts-2 ...

  3. python3.5之输出HTML实体字符

    出  关①   徐兰 凭山俯海古边州, 旆②影风翻见戍楼. 马后桃花马前雪,出关争得不回头? [注]关,指居庸关.②旆(pèi),旌旗. 刚刚学习用python写爬虫,实战一下. 抓取出一个网页的内容 ...

  4. [LeetCode]题解（python）：149-Max Points on a Line

    题目来源: https://leetcode.com/problems/max-points-on-a-line/ 题意分析: 在一个2D的板上面有很多个点,判断最多有多少个点在同一条直线上. 题目思 ...

  5. web中webAppRootKey作用

    <context-param> <param-name>webAppRootKey</param-name> <param-value>bgn.root ...

  6. Oracle EBS-SQL (SYS-15):查询表空间2.sql

    /*表空间查询*/ SELECT d.status "状态", d.tablespace_name "名称", d.contents "类型" ...

  7. JavaEE Tutorials (16) - Java消息服务概念

    16.1JMS API概述198 16.1.1什么是消息传送198 16.1.2什么是JMS API199 16.1.3何时使用JMS API199 16.1.4Java EE平台如何使用JMS AP ...

  8. iOS6和iOS7代码的适配(2)——status bar

    用Xcode5运行一下应用,第一个看到的就是status bar的变化.在iOS6中,status bar是系统在处理,应用中不需要考虑这部分,iOS7之后是应用在处理,每个ViewControlle ...

  9. nova的wsgi介绍【WIP】

    有关openstack的所有的帖子. https://www.ustack.com/blog/openstack_hacker/#Nova_Workflow 网上已经很多的分析文章了: http:// ...

  10. linux内核源码阅读之facebook硬盘加速flashcache之八

    前面我们的分析中重点关注正常的数据流程,这一小节关注如果有异常,那么流程是怎么走完的呢? 1)创建新任务时kcached_job申请不到 2)读写命中时cache块为忙 3)系统关机时处理,系统开机时 ...