ExtJS hbox 可拖动垂直线

Question

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

这只是文档中的示例。但我希望三个不同面板之间的垂直线可以拖动，这样用户就可以调整每个面板的大小。

感谢您的帮助！

Answer 1

您正在寻找 Splitter。在您的面板之间添加：

{xtype: 'splitter'}

示例：https://fiddle.sencha.com/#fiddle/r4h

ExtJS hbox 可拖动垂直线

ExtJS hbox draggable vertical line

javascript

containers

extjs

hbox