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
    36,780
    Vote Rating
    833
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi