如何在vbox布局中获取面板以填充容器？

我无法使面板填充其容器面板中的空间。容器是具有vbox布局的面板，其具有两个子面板。我看着Extjs how to set 100% height for vbox panel 并有类似的东西，但似乎并不奏效。如何在vbox布局中获取面板以填充容器？

截图： - http://i.imgur.com/nAbCr.png 的屏幕截图是从当我使用一个“适应”布局或甚而不具有在含面板组合框或optionsview。所以，我想要的是'选项'面板一直延伸到'结果'面板。本VBOX布局，这是我所得到的 - http://i.imgur.com/cB0k1.png

Ext.define('PA.view.CreateReportView', { 
    extend: 'Ext.panel.Panel', 
    alias: 'widget.createreportview', 
    id: 'createreport-panel', 
    requires: [ 
     'PA.view.OptionsView', // options panel 
    'PA.common.Connection'], 

    title: 'Create Report', 
    items: [{ 
     xtype: 'panel', 
     layout: { 
      type: 'vbox', 
      align: 'stretch' 
     }, 
     items: [{ 
      xtype: 'panel', 
      border: false, 
      height: '50px', 
      items: [{ 
       xtype: 'combobox', 
       .... 
      }] 
     }, { 
      xtype: 'panel', 
      border: false, 
      flex: 1, 
      items: [{ 
       xtype: 'optionsview', // options panel 
       style: { 
        paddingTop: '10px' 
       } 
      }] 
     }] 
    }] 
});

来源

2012-03-14 Armaan

的height:值应该是一个数字，而不是字符串。所以请改用height: 50。

来源

2012-03-14 20:03:50

也尝试过，没有工作 – Armaan 2012-03-14 20:05:01

然后我想这是因为你的外部“创建报告”面板没有指定布局。你应该给它'layout：'fit''。或完全移除额外面板组件。 – 2012-03-14 20:12:45

设置布局以适应createpanel和包含optiopnsview的面板修复它。它现在完美的工作，谢谢！ – Armaan 2012-03-14 20:59:14

我想你已经接近你的需要了。几个观测值： 1.高度需要设置为整数（无px后缀） 2.每个将有子级的容器都应该为它们定义一个布局，即使有默认值 - 它可能不是您想要的。

这是你的工作布局合理以及其他http://jsfiddle.net/dbrin/NJjhB/

一个建议我想补充的是用于开发人员喜欢灯饰的工具 - 它知道ExtJS的框架萤火虫插件。

来源

2012-03-14 20:11:52 dbrin

谢谢！这似乎工作，但组合框也一直延伸到页面的右侧。我已经为它指定了一个特定的宽度，但我想布局覆盖它。任何建议来解决这个问题？ – Armaan 2012-03-14 20:44:12

这就是对齐：拉伸进场。如果你需要从配置中分离出组合，你可能需要将它包装到一个容器中，这个容器可以伸展，但为它的孩子赋予不同的布局[combobox] - 什么是合理的。 – dbrin 2012-03-14 20:55:37

我想要对您的布局进行一个其他评论，在获取您需要的布局和嵌套面板之间小心翼翼地击中双唇。过度嵌套会带来性能损失。 – dbrin 2012-03-14 20:57:31

如何在vbox布局中获取面板以填充容器？

回答

相关问题