ExtJS - Заполнить и Авто Высота

Question

Я использую ExtJS (html / css), и у меня есть вопрос относительно Layout. Пример:

|--------|
|        |
|        |
|        |
|        |
|        |
|--------|
|        |
|        |
|--------|

Объединенная высота (у них нет отступов, полей и т. Д.) Составляет 100% его родительского контейнера. Предпочтительно, это две панели , как-то сложенные друг на друга.

Проблема в том, что я не знаю высоты ни верхней панели, ни нижней панели (она не зафиксирована и может измениться, поскольку содержимое на панелях может измениться, это два меню. ) Мне нужна верхняя панель до , заполнить из оставшегося места или иметь полосу прокрутки при необходимости .

Не так важно, чтобы решение было чисто ExtJS, просто контейнер для двух панелей - это панель ExtJS, содержимое двух панелей внутри - простой HTML, управляемый javascript.

Кто-нибудь, кто знает, с чего начать?

Редактировать
Я думаю, что частью проблемы является отсутствие события «изменить размер». Я думаю, что смогу сойти с полудинамического / статического решения и попытаться вычислить высоту нижней панели

Answer 1

Там может быть более простой способ.В ExtJS 4 (я не тестировал в 3, но это может работать) при использовании макета vbox , если дочерний элемент имеет flex из 0 или undefined, менеджер компоновки не будет корректироватьсявысота этого элемента.

Так, для вашего примера, верхняя панель будет иметь flex 1, а нижняя панель будет иметь flex 0:

Ext.create("widget.panel", {
  renderTo: Ext.getBody(),
  height: 300, width: 400,
  layout: { type: 'vbox', pack: 'start', align: 'stretch' },
  items: [{
    // our top panel
    xtype: 'container', 
    flex: 1,             // take remaining available vert space
    layout: 'fit', 
    autoScroll: true, 
    items: [{ 
      xtype: 'component', 
      // some long html to demonstrate scrolling
      html: '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>'
    }] 
  },{ 
    // our bottom panel
    xtype: 'container', 
    flex: 0,             // dont change height of component (i.e. let children dictate size.)
    items: [{ 
      xtype: 'button', 
      height: 200, 
      text: 'Hello World'
    }]
  }]
});

Теперь нижняя панель будет принимать только высоту дочерних компонентов, а верхняя панель - оставшуюся доступную высоту.

Answer 2

Если я правильно понял вопрос - две панели не должны иметь фиксированный размер, ЕСЛИ они не имеют контента, в каком случае они прокручиваются?Обычно я хотел бы предложить, чтобы по крайней мере одна из панелей представляла «основной» контент и имела фиксированный размер.В противном случае это должно работать:

layout:'vbox',
layoutConfig: {
    align : 'stretch',
    pack  : 'start',
},
items: [
    {html:'panel 1', flex:1},
    {html:'panel 2', flex:2}
]

Просто передайте эту конфигурацию элементу «удержания», а затем настройте «панель 1» и «панель 2», как считаете нужным (т.е. замените панель «{html:»1 ', flex: 1}' с именем компонента)

Answer 3

Вы также можете использовать CSS-трюк (CSS-поле 'max-height') вместо полей ExtJS 'layout' и 'flex'.Для этого просто добавьте следующие строки в элемент, который должен прокручиваться:

bodyStyle: { maxHeight: '300px' },
autoScroll: true,

Протестировано с ExtJS 3.4.0.

Answer 4

Это не простая проблема, чтобы решить.По вашему описанию проблемы Panel 2 должна иметь autoHeight: true, но нет никакого способа сказать браузеру или Ext автоматически изменять размер верхней панели в соответствии с этим.

Лучшее, что я могу придумать, этосделайте это вручную по таймеру:

• Создайте внешний контейнер для обеих панелей с абсолютной разметкой, фиксированной высотой.Примените к нему собственный стиль «положение: относительный».
• Панель 1 имеет config x: 0, y: 0, anchor: "100% 100%", autoScroll: true
• Панель 2 имеет значение autoHeight: true с пользовательским style: "top: auto; bottom: 0"
• Запустите задачус интервалом в 1 с или около того, который проверяет высоту панели 2 и назначает эту высоту для стиля отступа на панели 1