1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    9
    Vote Rating
    0
    wsharp@advresearch.com is on a distinguished road

      0  

    Default Customizing Sencha Touch Interface

    Customizing Sencha Touch Interface


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,065
    Vote Rating
    852
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    All you have to do is like the refresh button was added in the dockedItems.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    9
    Vote Rating
    0
    wsharp@advresearch.com is on a distinguished road

      0  

    Default


    I got it working, thanks for the help.

Thread Participants: 1

Tags for this Thread