ExtJS hbox draggable vertical line

Question

In ExtJS 4.2.2. I have an hbox container like this:

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

It is just the example in the docs. But i want the vertical line between the three different panels to be draggable, so the user is able to adjust the size of each panel.

Thank you for your help!

Maybe I should add a question to it. My question is "how do i do it, so the vertical line is draggable?" — AxisStarstreamer, Jul 26 '15 at 10:42

score 5 · Accepted Answer · answered Jul 26 '15 at 10:58

5

You are looking for Splitter. Between your panels, add:

{xtype: 'splitter'}

Example: https://fiddle.sencha.com/#fiddle/r4h

answered Jul 26 '15 at 10:58

Greendrake

3,657
2
18
24

You are awesome. So simple but I wasn't able to find it. Thank you very much – AxisStarstreamer Jul 26 '15 at 11:08
You can also use a border layout, instead of hbox, and set the items to 'split: true'. It depends on what you want.. http://docs.sencha.com/extjs/4.1.3/#!/example/layout/border.html – Tarabass Jul 27 '15 at 09:17

ExtJS hbox draggable vertical line

1 Answers1