View Full Version : Grid : the backgourd is over the chart !!

8 Mar 2012, 8:20 AM

how debug this ?



8 Mar 2012, 9:58 AM
I have this exact same problem, even with the most simplified/minimal chart configuration. In my case, several charts are embedded as tabs in a Tab Panel. The charts Tab Panel is a child tab of an enclosing/parent Tab Panel, in which all other application pages are displayed as tabs. I mention the container hierarchy in case your app is constructed in a similar manner, where this might possibly be related to the problem.

Only the first chart/tab of the child Tab Panel exhibits this behavior, where all the charts are identical in form/function/configuration. I think it's a bug in the Ext.draw.Surface class in regards to zIndex, but I'm not 100% sure.

I'm currently in the process of trying to figure out how to apply a zIndex to the grid lines in a chart...

8 Mar 2012, 11:03 AM
Below is the class definition for the chart in which the grid lines overlay the column/bars. Note that there's really nothing special going on here other than the chart using four data series and a custom theme to control the column/bar colors. Also note that the store uses autoLoad: false, where the actual load takes place in the afterrender event of the chart. Maybe that's related to the problem; I don't know...

Ext.define('Sales.view.dashboard.chart.SalesSummary', {

extend: 'Ext.chart.Chart',

alias: 'widget.chartsalessummary',

requires: [

animate: true,

axes: [{
type: 'Numeric',
position: 'left',
decimals: 0,
fields: ['sales'],
grid: true,
minimum: 0,
title: 'Sales'
type: 'Category',
position: 'bottom',
fields: ['salesperson'],
label: {
rotate: {
degrees: 40
title: 'Sales Type'

height: 300,

insetPadding: 10,

legend: {
position: 'bottom'

series: [{
type: 'column',
axis: 'left',
highlight: true,
xField: 'category',
yField: ['mtd', 'ytd', 'highestMonth', 'averageMonth'],
title: ['Month to Date', 'Year to Date', 'Highest Month', 'Average per Month'],
tips: {
height: 30,
width: 70,
trackMouse: true,
renderer: function(storeItem, item) {
this.setTitle(item.value[1]); // displays bar numeric value.

shadow: false,

store: {
autoLoad: false,
model: 'Sales.model.Summary',
proxy: {
type: 'ajax',
url: 'chart/salesSummary.action',
reader: {
type: 'json'

theme: 'salesSummary',

title: 'Sales Summary',

width: 400

6 Apr 2012, 5:32 AM
I think I've found the problem. This only happens if the chart is initially rendered with an empty data store, i.e. no bars/columns are drawn during the initial render.

If you then reload the store and data is returned, all bars/columns will be drawn behind the grid lines from then on.