ExtJS-заполнение и автоматическая Высота

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

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

совмещенная высота (они не имеют никакие прокладку, запас etc.)- это 100% его родительского контейнера. Предпочтительно, это две панели как-то сложены друг на друга.

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

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

кто знает, с чего начать?

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

9
css dom extjs html javascript

4 ответов

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

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

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

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

Итак, для вашего примера на верхней панели будет flex of 1 и нижняя панель будет иметь flex of 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'
    }]
  }]
});

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

7

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

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

просто дайте эту конфигурацию элементу "holding", а затем настройте "panel 1" и "panel 2" по своему усмотрению (т. е. замените "{html: "panel 1", flex:1} " на имя компонента)

3

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

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

протестировано с помощью ExtJS 3.4.0.

2