調整vbox的子項目大小

我們最近將ext-js從4.1更新爲4.2。在4.1以下代碼中，可以調整此處使用的vbox的子項目的大小。我們可以拖動這些孩子之間的邊界，並且這兩個項目都會調整大小。調整vbox的子項目大小

4.2中沒有辦法調整這些孩子的大小。指向正確的空間時，光標也不會改變形狀。

Ext.define('Example.view.NavPanel', { 
    extend: 'Ext.panel.Panel', 
    alias: 'widget.exampleNavPanel', 
    requires: ['Example.view.example.List', 'Example.view.example2.List', 'Example.view.paneledycji.EditTabPanel'], 
    layout: { 
     type: 'vbox', 
     align: 'stretch', 
     pack: 'start' 
    }, 
    items: [ 
     { 
      xtype: 'panel', 
      title: 'Navpanel', 
      collapsible: true, 
      flex: 1, 
      layout: { 
       type: 'hbox', 
       pack: 'start', 
       align: 'stretch' 
      }, 
      items: [ 
       {xtype: 'exampleList', flex: 1}, 
       {xtype: 'example2List', flex: 3} 
      ] 

     }, 
     { 
      xtype: 'editTabPanel', 
      flex: 1 
     } 
    ] 
});

我嘗試添加

resizable:true

到的第一個孩子。它指向邊框時使光標改變形狀，我可以拖動它......但兒童不會調整大小。當我刪除從第一個孩子撓我終於可以調整的項目，但它有一些問題：

我可以同時調整高度和寬度，我想只有高度的第一項，這是它在4.1
vbox會爲第一個孩子提供儘可能多的空間，如果第一個孩子太大，第二個孩子甚至不在窗口中，因此無法看到或調整第一個孩子的尺寸，因爲邊框不在屏幕上
設置minHeight對任一孩子完全沒有影響

我希望能夠爲上層孩子設置最小和最大高度，理想情況下以百分比爲單位，並禁用寬度調整大小。理想情況下，我也想爲兩個孩子設置默認尺寸。我無法使用docs.sencha.com上列出的任何配置組合來解決問題。爲了達到這個效果，我需要做些什麼？

來源

2013-09-05 Areinu

您可以使用boxready事件在初始佈局後刪除flex屬性。這樣，您可以從初始自動調整大小中受益，但它不會阻止組件稍後調整大小。

對於第二個問題，請使用resizeHandles選項指定可以抓取的邊以調整大小。

Ext.define('Example.view.NavPanel', { 
    extend: 'Ext.panel.Panel', 
    alias: 'widget.exampleNavPanel', 
    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 
    items: [{ 
     xtype: 'panel', 
     title: 'Navpanel', 

     flex: 1, 

     resizable: true, 
     resizeHandles: 's', 

     listeners: { 
      single: true, 
      boxready: function() { 
       delete this.flex; 
      } 
     } 
    },{ 
     xtype: 'component', 
     html: 'editTabPanel', 
     flex: 1 
    }] 
});

來源

2013-09-05 15:24:09 rixo

調整vbox的子項目大小

回答

相關問題