hello all I need help I am using the basic pie sample code from the docs site and it is erroring out. what am I doing wrong.

here is my index.html

<!DOCTYPE html><html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Retirement Plan</title>
    <link rel="stylesheet" type="text/css" href="resources/css/sencha-touch.css"/>
    <link rel="stylesheet" type="text/css" href="resources/css/touch-charts.css"/>
    <link rel="stylesheet" type="text/css" href="resources/css/main.css"/>
    <script type="text/javascript" src="touch/sencha-touch-all-debug.js"></script>
    <script type="text/javascript" src="touch/touch-charts-debug.js"></script>
        // Fix for problem  with android 3.x and 4.x which is
        // the browser has a problem with urls with ? and this
        // bug has not been fixed by google.  See:
        // http://code.google.com/p/android/issues/detail?id=17535 or
        // http://www.sencha.com/forum/showthread.php?162322-Sencha-Touch-2-PhoneGap-are-not-working-on-Android-4/page3&highlight=Loader
        Ext.Loader.setConfig({ disableCaching: false });
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript">
        if (!Ext.browser.is.WebKit) {
            alert("The current browser is unsupported.\n\nSupported browsers:\n" +
                "Google Chrome\n" +
                "Apple Safari\n" +
                "Mobile Safari (iOS)\n" +
                "Android Browser\n" +
                "BlackBerry Browser"
next here is the code I am using for the pie chart

var contribChartStore = new Ext.data.JsonStore({    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
    data: [
        {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
        {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
        {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
        {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
        {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}

Ext.define('MyLifeNowMobile.view.override.contribChart_Module', {
    requires: 'MyLifeNowMobile.view.contribChart_Module'
    contribChart = new Ext.chart.Chart({
            renderTo: Ext.getBody(),
            width: 500,
            height: 300,
            animate: true,
            store: contribChartStore,
            theme: 'Base:gradients',
            series: [{
                type: 'pie',
                angleField: 'data1',
                showInLegend: true,
                tips: {
                  trackMouse: true,
                      width: 140,
                      height: 28,
                      renderer: function(storeItem, item) {
                        //calculate and display percentage on hover
                        var total = 0;
                        store.each(function(rec) { total += rec.get('data1'); });
                          this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
                highlight: {
                    segment: {
                    margin: 20
            label: {
                field: 'name',
                display: 'rotate',
                contrast: true,
                font: '18px Arial'
var contribChartPage =  Ext.ComponentQuery.query('contribChart_Module');
var contribChartPageView= contribChartPage[0];
lastly I am getting the following error

Uncaught TypeError: Cannot read property 'selectors' of undefined

in the chart library that points to
themes.push(Ext.chart.theme[themeName || me.getTheme()].selectors.slice());

any thoughts?

thanks jeff