Weird behaviour moving splitter in ExtJS borderlayout - extjs

Question

I have a Viewport with a Borderlayout. Between center and west there is a splitter. When I move the splitter to the right, it gets a new position, but it scrambles my whole layout:
Before moving it looks like this:
After moving (not while moving!), the splitter is "hidden" and only visible when I hover over the new position. Look at the right - there is a new unwanted margin:
When I move the splitter to the left (just a few pixels), the new layout is applied correctly!
In case you need code, here I have the panel with the border-layout. If you need more, I'll provide it immediately.
Ext.define('MyApp.view.Main', {
extend: 'Ext.container.Container',
requires: [ // ...
],
layout: {type: 'border'},
items: [{
region: 'north',
height: 50,
collapsible: false,
frameHeader: false,
html: 'Main'
},{
region: 'west',
xtype: 'panel',
title: 'west',
collapsible: true,
resizable: true,
frame: true,
border: false,
width: 250,
layout: 'fit',
tools: [ // ...
],
items: [{
xtype: 'workoutlist'
}]
},{
region: 'center',
title: 'center',
xtype: 'centerView'
}]
});

Answer 1

Thanks to #Evan Trimboli I've replaced resizable: true with split: true, which helped in another problem.
The real cause of the problem was in the centerView:
Ext.define('MyApp.view.CenterView', {
extend: 'Ext.tab.Panel',
alias: 'widget.centerView',
enableTabScroll: true,
layout: 'fit',
// constrain: true, <-- this configuration option caused the weird behaviour
autoShow: true,
// ...
});
I don't know how the option constrain: true came to this view (probably some silly copy and paste error). Without, it works like a charm.