[Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 （tab）
问题描述
看到一个Ext 布局的实例问题，当点击左边的收合时，中间的区块并不会自动的填充余下的页面，导致右边留下一段空白。点击一下tab 就正常了。
分析了一下，使用的是Ext 的border 进行布局，有north、 west和center 三个区块。north 和west 都很简单，导致问题的应该是center 区块。
这个center 区块的写法时： 使用contentEl 指定一个div, 然后创建一个 Ext tab 的Component 来renderTo 到这个div, 简化的代码如下：
[javascript]
<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>
Ext.onReady(function() {
var viewport = Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 0
},
defaults: {
split: true
},
items: [
{
region: 'north',
contentEl: 'headerdiv'
},{
region: 'west',
contentEl: 'westdiv'
},{
region: 'center',
contentEl: 'centerdiv'
}
]
});
Ext.create('Ext.tab.Panel', {
activeTab: 0, // first tab initially active
renderTo: 'maintabs',
items: [{
html 'center1',
title: 'Close Me',
closable: true,
autoScroll: true
}, {
html: 'center2',
title: 'Center Panel',
autoScroll: true
}]
});
});
</script>
</HEAD>
<BODY>
<div id="headerdiv"></div>
<div id="westdiv"></div>
<div id="centerdiv"></div>
</BODY>
</HTML>
问题分析与解决
问题就出在center的处理上，
参考这篇
[Ext JS 4] contentEL,renderTo, applyTo 释义与区别
有这句 “ 使用contentEl这个HTML元素不会参与组件使用的布局方案”， 所以通过contentEl 添加的center 区块，在layout 时就会出现问题。
解决方式如下就可以了：
[javascript]
var viewport = Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 0
},
defaults: {
split: true
},
items: [
{
region: 'north',
contentEl: 'headerdiv'
},{
region: 'west',
contentEl: 'westdiv'
},Ext.create('Ext.tab.Panel', {
activeTab: 0, // first tab initially active
region: 'center',
items: [{
html 'center1',
title: 'Close Me',
closable: true,
autoScroll: true
}, {
html: 'center2',
title: 'Center Panel',
autoScroll: true
}]
})
]
});
延生考虑
Ext JS的SDK包的 examples\layout目录下有一个complex.html的例子就是用来演示布局的，是否按照以上错误的写法，也会出现这个问题。
试了一下，果不其然， 以下贴出错误改动的代码。
[javascript]
<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=
补充：web前端 , JavaScript ,
