ExtJS hbox перетаскиваемая вертикальная линия

В ExtJS 4.2.2. У меня есть такой контейнер hbox:

Ext.create('Ext.Panel', {
  width: 500,
  height: 300,
  title: "HBoxLayout Panel",
  layout: {
    type: 'hbox',
    align: 'stretch'
  },
  renderTo: document.body,
  items: [{
    xtype: 'panel',
    title: 'Inner Panel One',
    flex: 2
  },{
    xtype: 'panel',
    title: 'Inner Panel Two',
    flex: 1
  },{
    xtype: 'panel',
    title: 'Inner Panel Three',
    flex: 1
  }]
});

Это просто пример в документации. Но я хочу, чтобы вертикальную линию между тремя различными панелями можно было перетаскивать, чтобы пользователь мог регулировать размер каждой панели.

Спасибо за помощь!


javascript containers extjs hbox
person AxisStarstreamer    schedule 26.07.2015    source источник
comment
Может, стоит добавить к этому вопрос. У меня вопрос: как это сделать, чтобы вертикальную линию можно было перетаскивать?   -  person AxisStarstreamer    schedule 26.07.2015

Ответы (1)


arrow_upward
5
arrow_downward

Вы ищете Splitter. Между панелями добавьте:

{xtype: 'splitter'}

Пример: https://fiddle.sencha.com/#fiddle/r4h.

person Greendrake    schedule 26.07.2015
comment
Ты обалденный. Все так просто, но я не смог его найти. Большое Вам спасибо - person AxisStarstreamer; 26.07.2015
comment
Вы также можете использовать макет границы вместо hbox и установить для элементов значение «split: true». Это зависит от того, что вы хотите. docs.sencha .com / extjs / 4.1.3 / #! / example / layout / border.html. - person Tarabass; 27.07.2015