PDA

View Full Version : Chart not render properly inside child panel



bazzara
12 Apr 2012, 11:03 PM
Why when I put chart inside the child panel, the chart won't render properly?
Can somebody help me with this issue
I use extjs 4.0.7 with MVC

When I put chart inside the panel like this :


.....
extend: 'Ext.form.Panel',
alias : 'widget.main_kontrak',
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
border:false,
items:[{
xtype: 'listtac',
title: 'OPEX',
columnWidth: .75,
width:730,
border:false,
split:true,
collapsable:true
}, {
xtype:'panel',
bodyStyle:'border-top:0px;border-bottom:0px;',
align : 'stretch',
pack : 'start',
items:[
{
xtype:'thechart',
},{
xtype:'panel',
border:false,
title: 'Detail Information',
height:215,
width:657
},{
xtype:'tab_kontrak'

}]

}

]
})

but if I put the code like this, chart render


.....
extend: 'Ext.form.Panel',
alias : 'widget.main_kontrak',
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
border:false,
items:[{
xtype: 'listtac',
title: 'OPEX',
columnWidth: .75,
width:730,
border:false,
split:true,
collapsable:true
}, {
xtype:'thechart'
}

]
})

mitchellsimoens
13 Apr 2012, 7:59 AM
Doesn't look like you are giving the chart a size.

bazzara
15 Apr 2012, 10:49 PM
i defined the width and the height in thecart view


Ext.define('HR.view.kontrak.thecart' ,{
extend:'Ext.chart.Chart',
alias:'widget.thecart',
height:250,
width:657,
padding:5,
animate: true,

shadow: true,
store: 's_chart_penyerapan_spp',
axes: [{
type: 'Numeric',
position: 'left',
fields: ['jml'],
title: 'JML',
grid: true,
minimum: 0,
maximum: 100
}, {
type: 'Category',
position: 'bottom',
fields: ['waktu'],
title: 'Months'

}],
series: [{
type: 'column',
axis: 'left',
gutter: 70,
xField: 'waktu',
yField: ['jml'],
tips: {
trackMouse: true,
width: 74,
height: 38,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('waktu') + '<br />' + storeItem.get('jml'));
}
},
style: {
fill: '#38B8BF'
}
}]

})

and it's getting weird the chart render in the google chrome but not in firefox

I attach the screenshoot
34069
34070