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
  }]
});

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

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

1 2
javascript containers extjs

1 ответ:

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

{xtype: 'splitter'}

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

5