How to use Ext.resizer.Splitter?

[quaidbrown]

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'
},
logPanel],
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.

[friend]

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'
}]
}).show();

[quaidbrown]

Sweet, thanks!

[da_b0uncer]

If I add 'collapsible' the splitter gets a little arrow, but clicking on it doesn't collapse anything.
Did I miss some config parameter?