PDA

View Full Version : Multiple splitters don't work



da_b0uncer
23 Jul 2013, 5:41 AM
I have an vbox container with 5 sub-containers and 4 splitters between them.

When I try to increase the size of the first container, the size of the other containers gets altered in strange ways.

44995

44996

slemmon
25 Jul 2013, 9:36 AM
Aside from the chart bars / labels getting jammed up I don't believe I'm seeing a layout issue using the test case below on 4.2.1. Can you provide an alternate test case?



var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data':10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 5 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data':27 }
]
});


Ext.define('MyChart', {
extend: 'Ext.chart.Chart',
alias: 'widget.mychart',
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data'
}]
});


Ext.widget('container', {
renderTo: document.body,
height: 800,
width: 300,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: { anchor: '100%'},
items: [{
xtype: 'mychart',
flex: 1
}, {
xtype: 'splitter'
}, {
xtype: 'mychart',
flex: 1
}, {
xtype: 'splitter'
}, {
xtype: 'mychart',
flex: 1
}, {
xtype: 'splitter'
}, {
xtype: 'mychart',
flex: 1
}, {
xtype: 'splitter'
}, {
xtype: 'mychart',
flex: 1
}]
});