如何在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佈局中獲取面板以填充容器？

回答

相關問題