[Ext JS 4] 布局之实战二 - 中间区块不会自动伸展 (tab)续
中间的tab 区块无法自动伸展的原因一句话说就是: 使用contentEL的方式,相关HTML元素不会参与组件使用的布局方案。
但是在实际的开发过程中, 有时后这种方式可能无法避免, 或者说已经开发的代码,如何最简单的修正这个问题。
解决方法
利用center 区块的resize 事件可以解决这个问题。
因为在左边收合时,会触发center 区块的resize. 贴代码:
[html]
<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, 易做图s 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 : [
{
conte
补充:web前端 , JavaScript ,