I am just getting started with Sencha Touch, so I apologize if this is dumb question. I am trying to figure out how I would modify the UI. For instance I would like to add a button to the top panel of my Sencha Touch Charts that would open a modal login window. So I would need to modify the HTML output as well as add my own CSS and Javascript rules. My question is how I go about doing that. If anyone could point me to documentation outlining how to do this, or even provide examples that would be excellent. I've attached my code below as well as an image of the location I'm referring to. Thank you!

Index.html

HTML Code:
<!DOCTYPE html>
<html>
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />    
<link rel="stylesheet" href="css/touch-charts-demo.css" type="text/css">
    <title>Line Chart</title>    
<script type="text/javascript" src="js/sencha-touch.js"></script>    
<script type="text/javascript" src="js/touch-charts.js"></script>    
<script type="text/javascript" src="js/index.js"></script>
</head>
<body></body>
</html>
Index.js

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 onRefreshTap = function() {
            window.store1.loadData(generateData(31, 2));
        };
        
        var onHelpTap = function() {
            new Ext.Panel({
                   floating: true,
                   modal: true,
                   centered: true,
                   width: 300,
                   height: 250,
                   styleHtmlContent: true,
                   scroll: 'vertical',
                   dockedItems: [{
                       dock: 'top',
                       xtype: 'toolbar',
                       title: 'Column Chart'
                   }],
                   stopMaskTapEvent: false,
                   fullscreen: false,
                   html: "This example's uses custom styling to make each data point use a different gradient color.<br>" +
                            "The chart can be zoomed horizontally with a pinch gesture, and the panned by dragging.  For devices which do not support multi-touch, an extra toggle button is made available to switch between pan and zoom.  When zoomed in, arrow indicators will be overlayed on the chart to show that more data is available"
               }).show('pop');
        }
        new Ext.chart.Panel({
            fullscreen: true,
            title: 'Number of Cards not Pulled in [Location]',
            dockedItems: [{
                xtype: 'button',
                iconCls: 'shuffle',
                iconMask: true,
                ui: 'plain',
                handler: onRefreshTap
            }],
            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']
              //  }]
            }
        });


    }
});
touchchart.jpg