View Full Version : How to use Ext.resizer.Splitter?

17 Jan 2012, 7:22 AM
Trying to get the splitter to work. I can't find an example app that uses it.

Here's what I have:

var schedPanel = Ext.create("Ext.panel.Panel", {
items: [scheduler],
maintainFlex: true
var logPanel = Ext.create("Ext.panel.Panel", {
items: [eventLogPanel],
width: '100%'

var splitterContainer = Ext.create('Ext.panel.Panel', {
layout: {
type: 'vbox',
align: 'stretch'

items: [schedPanel,
xtype: 'splitter',
collapsible: true,
collapseTarget: 'next'
title: 'Schedule'

It lets me drag the splitter but doesn't resize anything, and the splitter handle snaps back to its original location when I let go.

When I collapse, the bottom panel goes blank. The splitter does not move from its original location. When I uncollapse, the bottom panel shoots to the top of the page, obscuring the splitter handle, and no more splitting can be done.

17 Jan 2012, 7:51 AM
Here's a working example:

Ext.create('Ext.window.Window', {
height: 300,
width: 800,
layout: {
type: 'hbox',
align: 'stretch'
items: [{
xtype: 'panel',
title: 'Panel Left',
width: 400
xtype: 'splitter'
xtype: 'panel',
flex: 1,
maintainFlex: true,
title: 'Panel Right'

17 Jan 2012, 7:57 AM
Sweet, thanks!

14 Mar 2013, 2:15 AM
If I add 'collapsible' the splitter gets a little arrow, but clicking on it doesn't collapse anything.
Did I miss some config parameter?