I have been developing in Sencha Touch with an MVC style format. I have recently downloaded the charts package. Working with the examples on a simple index.html page, I can manipulate the data and recreate tables. My problem comes when trying to do similar things inside my views. I was wondering if Sencha could provide an example using MVC where you load a chart (of any kind) into a panel (inside some view). Below is a code snippet where I am attempting to do something of that nature and failing...most of the chart code is directly from an example.


Code:
var colors = ['url(#v-1)', 'url(#v-2)', 'url(#v-3)', 'url(#v-4)', 'url(#v-5)'];
var store1 = new Ext.data.JsonStore({
            fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
            data: [{name: 'bob', data1: 21},
                {name: 'sam', data1: 33},
                {name: 'sarah', data1: 44},
                {name: 'wo', data1: 55},
                {name: 'when', data1: 66},
                {name: 'how', data1: 77}
            ]
        });
var chartPanel = new Ext.chart.Panel({
    // fullscreen: true, screws up the app -either way wont render properly
    title: 'Pie Chart',
  store: store1,
  shadow: false,
                  gradients: [{
                    'id': 'v-1',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(212, 40, 40)'
                        },
                        100: {
                            color: 'rgb(117, 14, 14)'
                        }
                    }
                },
                {
                    'id': 'v-2',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(180, 216, 42)'
                        },
                        100: {
                            color: 'rgb(94, 114, 13)'
                        }
                    }
                },
                {
                    'id': 'v-3',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(43, 221, 115)'
                        },
                        100: {
                            color: 'rgb(14, 117, 56)'
                        }
                    }
                },
                {
                    'id': 'v-4',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(45, 117, 226)'
                        },
                        100: {
                            color: 'rgb(14, 56, 117)'
                        }
                    }
                },
                {
                    'id': 'v-5',
                    'angle': 0,
                    stops: {
                        0: {
                            color: 'rgb(187, 45, 222)'
                        },
                        100: {
                            color: 'rgb(85, 10, 103)'
                        }
                    }
                }],
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    fields: ['data1'],
                    minimum: 0,
                    maximum: 100,
                    label: {
                        renderer: function(v) {
                            return v.toFixed(0);
                        }
                    },
                    title: 'Value'
                },
                {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Reports'
                }],  
  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']
                }]
});








var panel2 = new Ext.Panel({
    title: 'Reports',
    layout:'fit',
    items: [{
        xtype: 'list',
        store: workcatalog.stores.WhichReport,
        itemTpl: new Ext.XTemplate(
            "{label}"
        ),
        onItemDisclosure: function(record, btn, index) {
            var store1 = workcatalog.stores.Users;
                console.log(store1.getAt(index).data.id);
                
                workcatalog.controllers.WorkController.setUser(store1.getAt(index).data.id);
                Ext.dispatch({
                    controller: workcatalog.controllers.WorkController,
                    action: "displayUsedBy",
                    animation: {type:"slide", direction:"left"}
                    });
        },
        grouped: false,
        scroll: "verticle",
        //fullscreen: true    
        
    }],
    
});
workcatalog.views.WhichReportMenu = Ext.extend(Ext.TabPanel, {
    layout: {
        type: 'vbox',
        align: 'stretch',
    },
    defaults: {flex: 1},
    dockedItems: [{
           xtype: "toolbar",
           style: "font-size: 14px",
           title: "Report Details",
          items: [{
              xtype:"button",
               ui: 'back',
               text: 'Back',
                   handler: function() {
                        Ext.dispatch({
                               controller: workcatalog.controllers.WorkController,
                            action: "goBackFromWhichReports",
                            animation: {type:"slide", direction: "right"}
                        });
               }
            },
            {xtype:'spacer'},
            {
             id: 'home',
              xtype: "button",
               iconCls: "home x-icon-mask",
               handler: function() {
                workcatalog.controllers.WorkController.setFromUsersGate(0);
                workcatalog.controllers.WorkController.setFeaturedGate(0);
                Ext.dispatch({
                    controller: workcatalog.controllers.WorkController,
                    action: 'index',
                    animation: {type:'slide', direction:'right'}
                });
            }
            }]
    },{
        xtype: "toolbar",
        dock: "bottom",
           style: "font-size: 14px",
           title: "PC",
    }
    ],
    
    items: [panel2, chartPanel],


    initComponent: function() {


        workcatalog.views.WhichReportMenu.superclass.initComponent.apply(this, arguments);
    }
});