Can we use chart on Ext.Panel ?

[ultimate5289]

Hi all, here is my code for the panel with the chart inside.

Ext.define('FPApp.view.PhanTich',{    extend: 'Ext.Panel',
    xtype:'phantich',
    config: {
        items:[
            {
                xtype:'toolbar',
                title:'Phan Tich',
                items:[
                    {
                        xtype:'button',
                        iconMask:true,
                        iconCls:'reply',
                        id:'PTbackBtn'
                    }
                ],
                docked:'top'
            },
            {
                xtype:'chart',
                store: 'Chart',
                animate:true,
                theme:'Demo',
                themCls:'line1',
                legend: {
                    position: 'right'
                },
                axes: [
                    {
                        type: 'Numeric',
                        minimum: 0,
                        maximum: 10,
                        position: 'left',
                        fields: ['Expected','Actual'],
                        title: 'Triệu Đồng',
                        minorTickSteps: 1,
                        roundToDecimal: true,
                        decimals:1
                    },
                    {
                        type: 'Category',
                        position: 'bottom',
                        fields: ['Weeks'],
                        title: 'Tuần'
                    }
                ],
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        axis: 'left',
                        xField: 'Weeks',
                        yField: 'Expected',
                        title: 'Chi phí kì vọng'
                    },
                    {
                        type: 'line',
                        axis: 'left',
                        smooth: true,
                        xField: 'Weeks',
                        yField: 'Actual',
                        title: 'Chi phí thật'
                    }
                ]


            }


        ]
    }
});

I just want to use Ext.panel not Ext.chart.panel because I need to add other components like text fields to the items of panel. It doesn't work neither on chrome browser nor android device. I also included touch-charts.js and touch-charts.css from touch-chart-2.0-beta combine with sencha-touch-all.js and apple.css from Sencha Touch 2.0.1, But it didn't work. I just only see the legend of my chart in the panel nothing else. Could someone please help me about this.

[mitchellsimoens]

Sure you can use it in Ext.Panel, just make sure you set a size or use a layout on the panel.

[ultimate5289]

Hi mitchellsimoens ,

I try to use layout:'hbox' for the panel and here is the chart in my app.

chart.jpg
Which layout do I need for to render the chart correctly ?

[mitchellsimoens]

Since you only have one child of the panel then you could just use fit layout.

[ultimate5289]

Yeah now I can see the axes of the chart, but the series don't show in the chart. Do I need include any other css file ( I already include touch-charts.css from Touch-Chart-beta package) for the theme

"theme:'Demo',themCls:'line1'"

series: [

{
type: 'line',
smooth: true,
axis: 'left',
xField: 'Weeks',
yField: 'Expected',
title: 'Chi phí kì vọng'
},
{
type: 'line',
axis: 'left',
smooth: true,
xField: 'Weeks',
yField: 'Actual',
title: 'Chi phí thật'
}

]

Do I config the series wrong ?