Hide ext.chart.Toolbar from ext.chart.Panel

[blacksword888]

Good morning,<br><br>I'm creating an application for Ipad and i'm using ext.chart.Panel to display some statistics.<br>is there anyway to hide or disable the toolbar automatically generated in ext.chart.Panel ?&nbsp;<br><br>here is the code i'm using<br>

var chart1 = new Ext.chart.Panel({            
            style:'background-color:#F00',
            width: '50%',
            height:'100%',
            flex: 1,
            items:
            {
                cls: 'pie1',
                theme: 'Demo',
                store: store1,
                shadow: false,
                animate: true,
                series: [{
                    type: 'pie',
                    field: 'data1',
                  //  showInLegend: true,
                   // highlight: true,
                    label: {
                        field: 'name'
                    }
                }]
            }
        });


var panelHaut =  new Ext.Panel({
    width :'100%',
    height :'100%',
    flex :1,
    layout :'hbox',
    items:[chart1]
        });

i tried this code but the chart is not rendering

var chart1 = new Ext.chart.Chart({
        width: '200',
        height: '200',
        animate: false,
        store: store1,
    series: [{
        type: 'pie',
        field: 'data1',
        label: {
            field: 'name'
        }
    }]
    });

Could anyone help me ?

[ayee879]

Why does your panel have height: 100% and width: 100% when you can do fullscreen: true?

[deepak.sakpal]

Hey, did you got any solution for this?

[ayee879]

Oh, I think you have to use the fit layout for the panel holding the chart

[deepak.sakpal]

Using fit layout will hide the title bar? I'm also looking for a solution for hiding the chart panel's default title bar/tool bar.

[ayee879]

Sorry, I meant that you can't use Ext.chart.Panel. You'll have to make a Ext.Panel with a fit layout and as one of its items have it be a Ext.chart.Chart

[eyalfx]

Did you find any solution for it? Having the same problem here too.

[hundare]

Looking for the solution? Did anyone find it? I dont want my chart to take the fullscreen. I want to place the chart inside the panel. Giving height and width to Ext.chart.Chart does not work - the chart is not displayed inside the panel unless made fullscreen:true..please share the solution if anyone finds it.

Thanks

[pannonij]

I used a combination of css a javascript to remove the titlebar. I'm sure there is a better way as there still is a 0.1em title bar in generated code. To take it further maybe pass a blank dockedItem to constructor or remove it from render.

.x-panel-body {
	background-color:#FFF !important	
}
.x-toolbar {
	background-color:#FFF !important	
}

 
Ext.chart.Panel = Ext.extend(Ext.Panel, {
    defaultType: "chart",
    layout: "fit",
    constructor: function (a) {
        a.dockedItems = {
            xtype: "panel",
            height: "0.1em",
            dock: "top",
            layout: {
                type: "card",
                align: "stretch"
            },
            activeItem: 0,
//            dockedItems: {
//                dock: "right",
//                xtype: "toolbar",
//                ui: "light",
//                items: a.dockedItems
//            },
//            items: [{
//                    dock: "top",
//                    xtype: "toolbar",
//                    ui: "light",
//                    title: a.title || ""
//                }, {
//                    dock: "top",
//                    xtype: "toolbar",
//                    ui: "light",
//                    title: ""
//                }
//            ]
        };
        Ext.chart.Panel.superclass.constructor.call(this, a)
    },