PDA

View Full Version : Found a bug using charts with border layout



alefend
2 Aug 2011, 8:40 AM
Hi,
while I was trying to build a page with several panels I've found a bug regarding charts and border layout. In the minimal example below I create two tab panels, the first tab, named "Tab 1", contains just a button that loads some random data into the chart that is placed in the second tab, invisible at the beginning and named "Tab 2".

When I load the page containing this code and I click on the button on "Tab 1" the data are correctly loaded in the chart and when I switch to "Tab 2" the chart appears. However if I load the page, switch to "Tab 2" before clicking on the button, switch back to "Tab 1" and eventually click the button, I get a bunch of error messages on the Firebug console like this: "Unexpected value NaN parsing x attribute".

At this point if I switch again to "Tab 2" the plot doesn't show up and the only way to get it back is to reload the page and click the button on "Tab 1" without switching to "Tab 2" first.

I think this is a bug and I hope you can fix it as soon as possible. However I'd really appreciate if you can tell me how to avoid this misbehaviour in the meanwhile.

Thanks for your help,
Alessio



<!doctype html>

<html>
<head>
<title>Ext Chart Bug</title>

<link rel="stylesheet" type="text/css" href="/ext/4.0/resources/css/ext-all.css">
<script type="text/javascript" src="/ext/4.0/ext-all-debug.js"></script>

<script type="text/javascript">

var store = Ext.create('Ext.data.ArrayStore', {
fields: ['x', 'y']
});

var chart = Ext.create('Ext.chart.Chart', {
region: 'center',
store: store,
axes: [{
type: 'Numeric',
minimum: 0,
maximum: 1000,
position: 'left',
fields: ['y'],
grid: true
}, {
type: 'Category',
position: 'bottom',
fields: ['x'],
grid: true
}],
series: [{
type: 'line',
xField: 'x',
yField: 'y',
axis: 'left'
}]
});

var loadChartData = function() {
var data = [], i;
for (i = 1; i <= 5; i++) {
data.push([i, Math.floor(Math.random() * 1000)]);
}
store.loadData(data);
};

var tabs = Ext.create('Ext.tab.Panel', {
border: false,
items: [{
title: 'Tab 1',
html: 'Press the button',
buttons: [{
text: 'Load chart data',
handler: loadChartData
}]
}, {
title: 'Tab 2',
layout: 'border',
items: [{
xtype: 'panel',
region: 'west',
width: 100
}, chart]
}]
});

Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
width: 600,
height: 400,
autoRender: true,
renderTo: Ext.getBody(),
layout: 'fit',
items: [tabs]
});
});
</script>


</head>

<body>
</body>
</html>

alefend
3 Aug 2011, 1:45 AM
REQUIRED INFORMATION Ext version tested:

Ext 4.0.2

Browser versions tested against:

FF5 (firebug 1.8.0 installed)

Description:

I was trying to build a page with several panels I've found a bug regarding charts and border layout. In the minimal example below I create two tab panels, the first tab, named "Tab 1", contains just a button that loads some random data into the chart that is placed in the second tab, invisible at the beginning and named "Tab 2".

When I load the page containing this code and I click on the button on "Tab 1" the data are correctly loaded in the chart and when I switch to "Tab 2" the chart appears. However if I load the page, switch to "Tab 2" before clicking on the button, switch back to "Tab 1" and eventually click the button, I get a bunch of error messages on the Firebug console like this: "Unexpected value NaN parsing x attribute".

At this point if I switch again to "Tab 2" the plot doesn't show up and the only way to get it back is to reload the page and click the button on "Tab 1" without switching to "Tab 2" first.

Steps to reproduce the problem:

load the page, switch to "Tab 2" before clicking on the button
switch back to "Tab 1" and eventually click the button
switch again to "Tab 2" the plot doesn't show up

Test Case:
var store = Ext.create('Ext.data.ArrayStore', { fields: ['x', 'y'] }); var chart = Ext.create('Ext.chart.Chart', { region: 'center', store: store, axes: [{ type: 'Numeric', minimum: 0, maximum: 1000, position: 'left', fields: ['y'], grid: true }, { type: 'Category', position: 'bottom', fields: ['x'], grid: true }], series: [{ type: 'line', xField: 'x', yField: 'y', axis: 'left' }] }); var loadChartData = function() { var data = [], i; for (i = 1; i <= 5; i++) { data.push([i, Math.floor(Math.random() * 1000)]); } store.loadData(data); }; var tabs = Ext.create('Ext.tab.Panel', { border: false, items: [{ title: 'Tab 1', html: 'Press the button', buttons: [{ text: 'Load chart data', handler: loadChartData }] }, { title: 'Tab 2', layout: 'border', items: [{ xtype: 'panel', region: 'west', width: 100 }, chart] }] }); Ext.onReady(function() { Ext.create('Ext.panel.Panel', { width: 600, height: 400, autoRender: true, renderTo: Ext.getBody(), layout: 'fit', items: [tabs] }); }); HELPFUL INFORMATION Debugging already done:

none

Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:

Linux

defcon1
19 Aug 2011, 9:59 PM
I have the same issue, so a comment from the devs would be really helpful! ;)