[Ext JS 四] 布局之实战二 - 中间区块不会自动伸展 （tab）续
日期：2014-05-16 浏览次数：20326 次
[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 : 'cen
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
