I am attempting to have multiple chart panels and select each one using a tab. It seems that each time I initialize more than one Ext.Chart.Panel it will break all of the charts. For instance my "cardsNotPulled" chart will work fine until I define the "stockCardsNotPulled" chart. Am I doing something wrong?


Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.jpg',
        phoneStartupScreen: 'phone_startup.jpg',
        tabletIcon: 'icon-ipad.png',
        phoneIcon: 'icon-iphone.png',
        glossOnIcon: false,
        onReady: function() {
            window.generateData = function(n, floor) {
                var data = [],
                    p = (Math.random() * 11) + 1,
                    i;
    
                floor = (!floor && floor !== 0) ? 20 : floor;
    
                for (i = 0; i < (n || 31); i++) {
                    data.push({
                        name: i ,
                        data1: Math.floor(Math.max((Math.random() * 20), floor)),
                        data2: Math.floor(Math.max((Math.random() * 100), floor)),
                        data3: Math.floor(Math.max((Math.random() * 100), floor)),
                        data4: Math.floor(Math.max((Math.random() * 100), floor)),
                        data5: Math.floor(Math.max((Math.random() * 100), floor)),
                        data6: Math.floor(Math.max((Math.random() * 100), floor)),
                        data7: Math.floor(Math.max((Math.random() * 100), floor)),
                        data8: Math.floor(Math.max((Math.random() * 100), floor)),
                        data9: Math.floor(Math.max((Math.random() * 100), floor)),
                        data10: Math.floor(Math.max((Math.random() * 100), floor)),
                        data11: Math.floor(Math.max((Math.random() * 100), floor)),
                        data12: Math.floor(Math.max((Math.random() * 100), floor)),
                        data13: Math.floor(Math.max((Math.random() * 100), floor)),
                        data14: Math.floor(Math.max((Math.random() * 100), floor)),
                        data15: Math.floor(Math.max((Math.random() * 100), floor)),
                        data16: Math.floor(Math.max((Math.random() * 100), floor)),
                        data17: Math.floor(Math.max((Math.random() * 100), floor)),
                        data18: Math.floor(Math.max((Math.random() * 100), floor)),
                        data19: Math.floor(Math.max((Math.random() * 100), floor)),
                        data20: Math.floor(Math.max((Math.random() * 100), floor)),
                        data21: Math.floor(Math.max((Math.random() * 100), floor)),
                        data22: Math.floor(Math.max((Math.random() * 100), floor)),
                        data23: Math.floor(Math.max((Math.random() * 100), floor)),
                        data24: Math.floor(Math.max((Math.random() * 100), floor)),
                        data25: Math.floor(Math.max((Math.random() * 100), floor)),
                        data26: Math.floor(Math.max((Math.random() * 100), floor)),
                        data27: Math.floor(Math.max((Math.random() * 100), floor)),
                        data28: Math.floor(Math.max((Math.random() * 100), floor)),
                        data29: Math.floor(Math.max((Math.random() * 100), floor)),
                        data30: Math.floor(Math.max((Math.random() * 100), floor))
                    });
                }
                return data;
            };
            window.store1 = new Ext.data.JsonStore({
                fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
                data: generateData(31, 5)
            });
    
            var colors = ['url(#blue)'];
            
            var onMsgTap = function () {
                  var msg = new Ext.MessageBox();
                    msg.show({
                    title: 'Hello World',
                    msg: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt',
                    buttons: [{text:'Sure',itemId:'sure'},{text:'No Way',itemId:'noway'}],
                    fn:function(response){
                        console.log(response)
                    }
                });
            }
            
            var onRefreshTap = function() {
                window.store1.loadData(generateData(31, 2));
            };
            
            
            // ******************
            // ** CHART PANELS **
            // ******************
            
            // Number of cards not pulled
            // Chart Panel
            var cardsNotPulled = new Ext.chart.Panel({
                fullscreen: true,
                title: 'Cards Not Pulled At [Location]',
                items: {
                    cls: 'column1',
                    //animate: {
                    //    easing: 'bounceOut',
                    //    duration: 750
                    //},
                    store: store1,
                    shadow: false,
                    gradients: [{
                        'id': 'blue',
                        'angle': 0,
                        stops: {
                            0: {
                                color: 'rgb(45, 117, 226)'
                            },
                            100: {
                                color: 'rgb(14, 56, 117)'
                            }
                        }
                    }],
                    axes: [{
                        type: 'Numeric',
                        position: 'left',
                        fields: ['data1'],
                        minimum: 0,
                        maximum: 30,
                        label: {
                            renderer: function(v) {
                                return v.toFixed(0);
                            }
                        },
                        title: '# of Cards Not Pulled'
                    },
                    {
                        type: 'Category',
                        position: 'bottom',
                        fields: ['name'],
                        title: Date.monthNames[8]
                    }],
                    series: [{
                        type: 'column',
                        axis: 'left',
                        highlight: true,
                        renderer: function(sprite, storeItem, barAttr, i, store) {
                            barAttr.fill = colors[i % colors.length];
                            return barAttr;
                        },
                        label: {
                          field: 'data1'
                        },
                        xField: 'name',
                        yField: 'data1'
                    }],
                  //  interactions: [{
                  //      type: 'panzoom',
                  //      axes: ['bottom']
                  //  }]
                }
            });
            
            // Number of stock out cards not pulled
            // Chart Panel
            var stockCardsNotPulled = new Ext.chart.Panel({
                fullscreen: true,
                title: 'Cards Not Pulled At [Location]',
                items: {
                    cls: 'column1',
                    //animate: {
                    //    easing: 'bounceOut',
                    //    duration: 750
                    //},
                    store: store1,
                    shadow: false,
                    gradients: [{
                        'id': 'blue',
                        'angle': 0,
                        stops: {
                            0: {
                                color: 'rgb(45, 117, 226)'
                            },
                            100: {
                                color: 'rgb(14, 56, 117)'
                            }
                        }
                    }],
                    axes: [{
                        type: 'Numeric',
                        position: 'left',
                        fields: ['data1'],
                        minimum: 0,
                        maximum: 30,
                        label: {
                            renderer: function(v) {
                                return v.toFixed(0);
                            }
                        },
                        title: '# of Cards Not Pulled'
                    },
                    {
                        type: 'Category',
                        position: 'bottom',
                        fields: ['name'],
                        title: Date.monthNames[8]
                    }],
                    series: [{
                        type: 'column',
                        axis: 'left',
                        highlight: true,
                        renderer: function(sprite, storeItem, barAttr, i, store) {
                            barAttr.fill = colors[i % colors.length];
                            return barAttr;
                        },
                        label: {
                          field: 'data1'
                        },
                        xField: 'name',
                        yField: 'data1'
                    }],
                  //  interactions: [{
                  //      type: 'panzoom',
                  //      axes: ['bottom']
                  //  }]
                }
            });
            
            // ****************
            // ** NAVIGATION **
            // ****************
            
            // Tab bar (intended for page selection)
            new Ext.TabPanel({
                fullscreen: true,
                ui        : 'plain',
                sortable  : true,
                tabBarDock: 'bottom',
                items: [
                    {
                        title: 'Home',
                        html : '1',
                        layout: 'fit'
                    },
                    {
                        title: 'Cards Not Pulled',
                        items: [cardsNotPulled],
                        layout: 'fit'
                    },
                    {
                        title: 'Stock Cards Not Pulled',
                        items: [stockCardsNotPulled],
                        layout: 'fit'
                    }
                ]
            });
    
        }
    });