当前位置:编程学习 > JS >>

[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 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,