[Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 （tab）
前言
[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）的更多相关文章
- 【翻译】探究Ext JS 5和Sencha Touch的布局系统
原文:Exploring the Layout System in Ext JS 5 and Sencha Touch 布局系统是Sencha框架中最强大和最有特色的一个部分. 布局要处理应用程序中每 ...
- 【翻译】在Ext JS和Sencha Touch中创建自己定义布局
原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...
- 谈谈Ext JS的组件——容器与布局
概述 在页面中,比较棘手的地方就是布局.而要实现布局,就得有能维护布局的容器.可以说,在我试过和使用过的Javascript框架中,Ext JS的布局是做得最棒的一个,而这得益于它强大的容器类和丰富的 ...
- 【翻译】在Ext JS和Sencha Touch中创建自定义布局
原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...
- Ext JS添加子组件的误区
经常会有人问我,为什么我的Grid不能岁窗口的变得而自动调整.了解后,发现很多人都习惯在渲染子组件的时候将Gird渲染到容器内的一个div里,而这正是问题的所在. 在Ext JS的布局系统中,能控制到 ...
- [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)
前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件 ==> “2. 每年的周数从(1-52), 如果超过52 周 ...
- 谈谈Ext JS的组件——布局的用法
概述 在Ext JS中.包括两类布局:组件类布局和容器类布局.由于有些组件是有不同的组件组合而成的,如字段就由标题和输入框构成,他们之间也是存在布局关系的,而这就须要组件类布局来处理组件内自己特有的布 ...
- 谈谈Ext JS的组件——布局的用法续二
绝对布局(Ext.layout.container.Absolute) 绝对布局让我回忆到了使用Foxpro开发的时候,哪时候的界面布局就是这样.通过设置控件的左上角坐标(x.y)和宽度来进行的,由于 ...
- [Ext JS 4] 实战之 Picker 和 Picker Field
前言 所谓的picker , 就是弹出一个选择框,让你选择一些信息.比如选择日期, 选择颜色等: 选择的结果总是要放在一个地方的,Picker Field 就是用来放置选择结果的一个文本框. 在Ext ...
随机推荐
- js/jQuery实现复制到剪贴板功能，兼容所有浏览器
因为工作的原因,需要实现这样一个功能:点击按钮,复制文本内容. 百度了一下,大都语焉不详,最终找到了一篇很好的博文,有讲解,有实例,捣鼓了一会,最终实现了功能. 网址在这里http://www.cnb ...
- spoj TSUM - Triple Sums fft+容斥
题目链接 首先忽略 i < j < k这个条件.那么我们构造多项式$$A(x) = \sum_{1现在我们考虑容斥:1. $ (\sum_{}x)^3 = \sum_{}x^3 + 3\s ...
- STL容器的内存分配
这篇文章参考的是侯捷的<STL源码剖析>,所以主要介绍的是SGI STL实现版本,这个版本也是g++自带的版本,另外有J.Plauger实现版本对应的是cl自带的版本,他们都是基于HP实现 ...
- zookeeper 学习笔记 （C语言版本）
1.zookeeper简介 zookeeper是Hadoop的子项目,在大型分布式系统中,zookeeper封装好了一些复杂易出错的服务,提供简单易用的接口,给使用者提供高效稳定的服务.这些服务包括配 ...
- Orchard 源码探索（Application_Start）之异步委托调用
2014年5月26日 10:26:31 晴 ASP.NET 接收到对应用程序中任何资源的第一个请求时,名为ApplicationManager 的类会创建一个应用程序域.应用程序域为全局变量提供应用程 ...
- 翻译 GITHUB上HOW TO BE A GOOD PROGRAMMER
转载请注明出处: http://www.cnblogs.com/hellocwh/p/5184072.html 更多内容点击查看 https://ahangchen.gitbooks.io/windy ...
- 1.9 需求订单导入MDS
1.9 需求订单导入MDS 1.9.1 业务方案描述 将”需求订单维护表”中完成调整维护的需求订单导入系统标准MDS中,使之驱动对应的物料需求计划(MRP)的运行. 1.9.2 ...
- 使用MySQL处理百万级以上数据时，不得不知道的几个常识
最近一段时间参与的项目要操作百万级数据量的数据,普通SQL查询效率呈直线下降,而且如果where中的查询条件较多时,其查询速度简直无法容忍.之前数据量小的时候,查询语句的好坏不会对执行时间有什么明显的 ...
- spoj 7258 Lexicographical Substring Search (后缀自动机)
spoj 7258 Lexicographical Substring Search (后缀自动机) 题意:给出一个字符串,长度为90000.询问q次,每次回答一个k,求字典序第k小的子串. 解题思路 ...
- C++四种强制类型转换详解
什么是类型转换? 类型转换的含义是通过改变一个变量的类型为别的类型从而改变该变量的表示方式.为了类型转换一个简单对象为另一个对象你会使用传统的类型转换操作符. C与C++的类型转换 //C中: //复 ...