Проблема автоматически регулирует высоту внутри окна просмотра Extjs 4.2.1

Question

У меня есть Viewport в приложении ExtJs. Когда rqstPanel свернут, rsltsPanel активируется. Но это не изменение размера.

Ext.create('Ext.Viewport', { 
layout: 'border', 
align: 'center', 
border : 0, 
defaultAlign : 'center', 
items: [ 
{ 
    region: 'north', 
    align: 'center', 
    html : 'some html ' 
}, 
{ 
    region: 'center', 
    align: 'center', 
    minHeight: 500, 
    items: [rqstPanel, rsltsPanel] 
} 
] 
}); 

Я также попытался:

Ext.create('Ext.Viewport', { 
layout: 'border', 
align: 'center', 
border : 0, 
defaultAlign : 'center', 
items: [ 
{ 
    region: 'north', 
    align: 'center', 
    html : 'some html' 
}, 
{ 
    region: 'center', 
    align: 'center', 
    minHeight: 500, 
    items: [rqstPanel] 
} 
{ 
    region: 'south', 
    align: 'center', 
    minHeight: 500, 
    items: [rsltPanel] 
} 
] 
}); 

Answer 1

Как сказал Томас, пример вы ссылки на работы только потому, что элементы расположены в окне непосредственно. В окне просмотра используется border layout. Ваш rqstPanel является подэлементом панели, и эта панель затем находится в макете границы. Поэтому, когда rqstpanel свернут, он является родительским, панель не рушится.

Так пример имеет эту иерархию:

Viewport (layout: 'border') 
- Panel (north) 
- Panel (center) 
- Panel (south) 

Когда FXP центральная панель свернута, расположение окна просмотра будет изменять размер братьев и сестер, чтобы заполнить свободное пространство.

У вас есть это:

Viewport (layout: 'border') 
- Panel (north) with content 'some html' 
- Panel (center) 
    - Panel rqstPanel 
- Panel (south) 
    - Panel rsltPanel 

Это связано с xtype по умолчанию является «панель» и вы добавляете rqstPanel как ребенок этой панели Повсеместно это items конфигурации. В этом коде создается панель, которая находится между rqstPanel и видовым окном.

{ 
    region: 'center', 
    align: 'center', 
    minHeight: 500, 
    items: [rqstPanel] 
} 

Так что, когда rqstPanel свернут его родители (в центре) не изменяются в окне просмотра, так как все предметы у него есть (север/центр/юг) имеют одинаковое значение и Виль принимать равное количество высоты.

В основном то, что сказал Томас, решит вашу проблему. Не позволяйте rqstPanel и rsltPanel быть подэлементами панелей, которые являются элементами в окне просмотра - добавьте их непосредственно в качестве дочерних элементов.

В основном вы хотите добавить свой rqstPanel напрямую.

Ext.define("MyApp.view.RequestPanel", { 
    extend: "Ext.panel.Panel", 
    alias: "widget.requestPanel", 
    // other configs for this panel 
}); 

Ext.define("MyApp.view.ResultsPanel", { 
    extend: "Ext.panel.Panel", 
    alias: "widget.resultsPanel", 
    // other configs for this panel 
}); 

Ext.create('Ext.Viewport', { 
    layout: 'border', 
    align: 'center', 
    border : 0, 
    defaultAlign : 'center', 
    items: [ 
     { 
      region: 'north', 
      align: 'center', 
      html : 'some html' 
     }, 
     { 
      xtype: 'requestPanel', 
      region: 'center', 
      align: 'center', 
      minHeight: 500 
     }, 
     { 
      xtype: 'resultsPanel', 
      region: 'south', 
      align: 'center', 
      minHeight: 500 
     } 
    ] 
});