yjsyx333
2010-09-30 00:26
浏览 222

求一Ext布局效果的解决问题?

就是一个主页面框架为border布局,为north,west,center,其中在center面板中嵌套一个“田”字布局,这个“田”字布局要自适应充满center面板我尝试了一种方式,是在center面板中先加入一个column布局的面板,其中属性为2列,再在这两列的面板分别加入anchor布局的面板,测试打开页面能出现“田”字自适应的效果,不过在页面改变大小后虽然“田”字随着变,但是却不对称,如何使“田”字既能自适应又能保持对称的效果呢?

下面是我在示例布局文件中做了一些修改,代码如下:文件路径为ext-3.2.1\examples\layout\

 

<html>
<head>
  <title>Column Layout</title>
 <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
  <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
 <style type="text/css">
 html, body {
        font:normal 12px verdana;
        margin:0;
        padding:0;
        border:0 none;
        overflow:hidden;
        height:100%;
    }
 .x-panel-body p {
     margin:5px;
 }
    .x-column-layout-ct .x-panel {
        margin-bottom:5px;
    }
    .x-column-layout-ct .x-panel-dd-spacer {
        margin-bottom:5px;
    }
    .settings {
        background-image:url(../shared/icons/fam/folder_wrench.png) !important;
    }
    .nav {
        background-image:url(../shared/icons/fam/folder_go.png) !important;
    }
    </style>
 <script type="text/javascript">
    Ext.onReady(function(){
       Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    var anchor1_panel=new Ext.Panel({
   layout:'anchor',
   items:[{
    title:'Item 1',
    html:'Content 1',
    anchor:'100% 50%'
   },{
    title:'Item 3',
    html:'Content 3',
    anchor:'100% 50%'
   }]
    });
    var anchor2_panel=new Ext.Panel({
   layout:'anchor',
   items:[{
    title:'Item 2',
    html:'Content 2',
    anchor:'100% 50%'
   },{
    title:'Item 4',
    html:'Content 4',
    anchor:'100% 50%'
   }]
    });
    var column1_panel=new Ext.Panel({
   layout:'column',
   items:[{
    columnWidth:.5,
    id:'column1',
    baseCls:'x-plain',
    bodyStyle:'padding:1px 0 1px 1px',
    items:[anchor1_panel]
   },{
    columnWidth:.5,
    baseCls:'x-plain',
    bodyStyle:'padding:1px 0 1px 1px',
    items:[anchor2_panel]
   }]
    });
       var north_panel=new Ext.Panel({
        region:'north',
     id:'north-panel',
     title:"North",
     height:100
    });
    var west_panel=new Ext.Panel({
        region:'west',
           id:'west-panel',
     title:"West",
     split:true,
   width: 200,
   minSize: 175,
   maxSize: 400,
   collapsible: true,
   margins:'0 0 5 5',
   cmargins:'0 5 5 5',
   layout:'accordion',
   layoutConfig:{
    animate:true
   },
   items: [{
    html: Ext.example.shortBogusMarkup,
    title:'Navigation',
    autoScroll:true,
    border:false,
    iconCls:'nav'
   },{
    title:'Settings',
    html: Ext.example.shortBogusMarkup,
    border:false,
    autoScroll:true,
    iconCls:'settings'
   }]
    });
    var center_panel=new Ext.Panel({
        region:'center',
     id:'center-panel',
     title:"Center",
     margins:'0 5 5 0',
     listeners :{ bodyresize:function(p,width,height) { anchor1_panel.setHeight(height);anchor2_panel.setHeight(height); } },
     items:[column1_panel]
    });
       var viewport = new Ext.Viewport({
            layout:'border',
            items:[north_panel,west_panel,center_panel]
        });
    });
 </script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
</body>
</html>

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • cyrilluce 2010-09-30 09:24
    已采纳

    你把事情弄复杂了,其实只用给center_panel加上layout:"fit"配置就可以了

    当容器大小变动时,会触发layout操作的。
    layout操作又会更改下级容器大小,又会触发它的layout
    只要中间layout都有大小传递,就能完全自适应

    默认的layout是ContainerLayout,它是不干任何事情的,也就不会将大小变动传递下去。

    点赞 评论
  • lizhiyezi 2010-09-30 08:48

    listeners :{ bodyresize:function(p,width,height) {
    anchor1_panel.setHeight(height);anchor2_panel.setHeight(height);
    p.doLayout(); //加上这句
    } },

    点赞 评论

相关推荐 更多相似问题