Ext.chart.Legend never rendered afterwards if the chart store is initial empty

[msinn]

REQUIRED INFORMATION Ext version tested:

• Ext 4.1.3

Browser versions tested against:

• FF17

DOCTYPE tested against:

• DTD XHTML 1.0 Transitional

Description:

• Tested with Ext.chart.series.Pie, if the chart store has initial no data, the legend is after a dataLoad never rendered.

Steps to reproduce the problem:

• see working example

The result that was expected:

• see working example

The result that occurs instead:

• see working example

Test Case:

            Ext.require(['Ext.chart.*',
            'Ext.Window', 
            'Ext.fx.target.Sprite', 
            'Ext.layout.container.Fit', 
            'Ext.window.MessageBox', 
            'Ext.data.*']);
        console.log('start');
        
        Ext.onReady(function () {
            console.log('start1');
            
            Ext.define('SingleM', {
                extend: 'Ext.data.Model',
                idProperty: 'Zt',
                fields: [
                    {
                        name: 'Zt',
                        dateFormat: 'd.m.Y H:i',
                        type: 'date'
                    },
                    {
                        name: 'Bm',
                        type: 'int'
                    }
                ]
            }); 
            
            Ext.define('PieM', {
                extend: 'Ext.data.Model',
                //idProperty: 'Name',
                fields: [
                    {
                        name: 'Name',
                        type: 'string'
                    },
                    {
                        name: 'Bm',
                        type: 'int'
                    }
                ]
            });        
                
            var data1 = [{"Zt":"22.11.2012 06:50","Bm":"6"},
                {"Zt":"22.11.2012 07:00","Bm":"13"},{"Zt":"22.11.2012 07:10","Bm":"19"},
                {"Zt":"22.11.2012 07:20","Bm":"25"},{"Zt":"22.11.2012 07:30","Bm":"31"},
                {"Zt":"22.11.2012 07:40","Bm":"37"},{"Zt":"22.11.2012 07:50","Bm":"42"},
                {"Zt":"22.11.2012 08:00","Bm":"46"},{"Zt":"22.11.2012 08:10","Bm":"48"},
                {"Zt":"22.11.2012 08:20","Bm":"54"},{"Zt":"22.11.2012 08:30","Bm":"60"},
                {"Zt":"22.11.2012 08:40","Bm":"62"},{"Zt":"22.11.2012 08:50","Bm":"66"},
                {"Zt":"22.11.2012 09:00","Bm":"70"},{"Zt":"22.11.2012 09:10","Bm":"74"},
                {"Zt":"22.11.2012 09:20","Bm":"76"},{"Zt":"22.11.2012 09:40","Bm":"81"},
                {"Zt":"22.11.2012 09:50","Bm":"87"},{"Zt":"22.11.2012 10:00","Bm":"92"},
                {"Zt":"22.11.2012 10:10","Bm":"98"},{"Zt":"22.11.2012 10:20","Bm":"103"},
                {"Zt":"22.11.2012 10:30","Bm":"108"},{"Zt":"22.11.2012 10:40","Bm":"109"},
                {"Zt":"22.11.2012 10:50","Bm":"115"},{"Zt":"22.11.2012 11:00","Bm":"121"},
                {"Zt":"22.11.2012 11:10","Bm":"126"},{"Zt":"22.11.2012 11:20","Bm":"132"},
                {"Zt":"22.11.2012 11:30","Bm":"136"},{"Zt":"22.11.2012 11:40","Bm":"138"},
                {"Zt":"22.11.2012 11:50","Bm":"144"},{"Zt":"22.11.2012 12:00","Bm":"149"},
                {"Zt":"22.11.2012 12:50","Bm":"155"},{"Zt":"22.11.2012 13:00","Bm":"161"},
                {"Zt":"22.11.2012 13:10","Bm":"165"}];
                

            var store = Ext.create('Ext.data.JsonStore', {
                storeId: 'SingleS',
                model: 'SingleM',
                data: data1
            });
            
            var store2= Ext.create('Ext.data.JsonStore', {
                storeId: 'PieS',
                model: 'PieM'
            });
                  
            var chart = Ext.create('Ext.chart.Chart', {
                    xtype: 'chart',
                    animate: true,
                    store: store2,
                    shadow: true,
                    legend: {
                        position: 'right',
                        update: true
                    },
                    insetPadding: 30,
                    //theme: 'Base:gradients',
                    series: [{
                        type: 'pie',
                        field: 'Bm',
                        showInLegend: true,
                        //donut: donut,
                        tips: {
                          trackMouse: true,
                          width: 140,
                          height: 28,
                          renderer: function(storeItem, item) {
                            //calculate percentage.
                            var total = 0;
                            store2.each(function(rec) {
                                total += rec.get('Bm');
                            });
                            this.setTitle(storeItem.get('Name') + ': ' + Math.round(storeItem.get('Bm') / 480 * 100) + '%');
                          }
                        },
                        highlight: {
                          segment: {
                            margin: 20
                          }
                        },
                        label: {
                            field: 'Name',
                            display: 'rotate',
                            contrast: true,
                            font: '18px Arial',
                            renderer: function(v) { return v; }
                        }
                    }]
                });
        
            var panel1 = Ext.create('widget.panel', {
                width: 800,
                height: 600,
                title: 'Semester Trends',
                renderTo: Ext.getBody(),
                layout: 'fit',
                tbar: [{
                    text: 'Save Chart',
                    handler: function() {
                        Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
                            if(choice == 'yes'){
                                chart.save({
                                    type: 'image/png'
                                });
                            }
                        });
                    }
                }, {
                    text: 'Reload Data',
                    handler: function() {
                        // Add a short delay to prevent fast sequential clicks
                        window.loadTask.delay(100, function() {
                            store1.loadData(generateData(6, 20));
                        });
                    }
                }, {
                    enableToggle: true,
                    pressed: false,
                    text: 'Donut',
                    toggleHandler: function(btn, pressed) {
                        chart.series.first().donut = pressed ? 35 : false;
                        chart.refresh();
                    }
                }],
                items: chart
            });
            
            store.loadData(data1);
            //store.add(data1);
            var pieData = [];
            pieData.slice();
            pieData.push({'Name':'Arbeitszeit', 'Bm':store.max('Bm')});
            pieData.push({'Name':'Stillstand', 'Bm':480-store.max('Bm')});
            store2.loadData(pieData);
            //store2.add(pieData);
            //chart.refresh();
            //chart.redraw();
            //console.log(pieData);
        });

HELPFUL INFORMATION Screenshot or Video:

• not attached

See this URL for live test case: http:// Debugging already done:

• none

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css

Operating System:

• Win7

[evant]

Thanks for the test case, this is a dupe of: EXTJSIV-7458

Should be already fixed for the 4.2 release.