ExtJS jak ustawić wysokość 100% do panelu vbox

Question

Hi ~

Chcę ustawić 100% z lewej strony na wysokości do panelu 2. ale nie wiem jak to zrobić ..

tutaj jest mój kod testy,

{ 
    title : 'EAST', 
    region : 'east', 
    layout : 'vbox', 
    layoutConfig : { 
     align : 'stretch' 
    }, 
    bodyStyle : 'border:1px solid blue', 
    width: 300, 
    items : [ 
     new Ext.Panel({ 
      title : 'Panel 1', 
      border : true, 
      layout : 'fit', 
      height : 250, 
      html : 'PANEL 1 AREA' 
     }), 
     new Ext.Panel({ 
      title : 'Panel 2', 
      border : true, 
      bodyStyle : 'border:1px solid red', 
      layout : 'fit', 
      html : 'PANEL 2 AREA' 
     }) 
    ] 
} 

próbowałem, autoHeight: true i wysokość: '100%' do panelu 2, ale to nie działa.

ktoś wie, proszę mi pomóc ~

dziękuję ~!

Answer 1

Powinieneś użyć właściwości flex dla drugiego panelu.

new Ext.Panel({ 
    title : 'Panel 2', 
    border : true, 
    bodyStyle : 'border:1px solid red', 
    layout : 'fit', 
    html : 'PANEL 2 AREA', 
    flex: 1 
}) 

Answer 2

spróbuj ustawić właściwość elastycznego w drugim panelu

new Ext.Panel({ 
     title  : 'Panel 2', 
     border : true, 
     bodyStyle : 'border:1px solid red', 
     layout : 'fit', 
     html  : 'PANEL 2 AREA', 
     flex  : 1 

    }) 

Flex jest używany tylko wtedy, gdy składnik jest renderowany przez pojemnik, który został skonfigurowany do korzystania z BoxLayout. Każde dziecko Komponent o właściwości flex zostanie wygięty w pionie (przy pomocy VBoxLayout) lub poziomo (przy pomocy HBoxLayout) zgodnie ze względną wartością flex elementu w porównaniu do sumy wszystkich komponentów z określoną wartością flex.