Sencha Touch refs examples and documentation

I normally don’t like to throw large blocks of code out here, but the following Sencha Touch source code shows how to use the refs config parameter.

refs documentation

Before getting to the source code, here are the refs comments you’ll find in the code:

"In the refs configuration, you can set up references to view instances. This allows you to retrieve and manipulate components on the page inside of your controller’s actions."

and:

"refs create a reference to a component ... basically using Ext.ComponentQuery#down."

and:

"put a reference to a view instance (component) inside of a controller."

refs source code (examples)

Here’s the source code showing some refs in action:

Ext.define('RadioMobile.controller.TimeControlsController', {
    extend: 'Ext.app.Controller',

    requires: [
        'RadioMobile.view.TimeControlsPanel',
        'VP.util.Util'
    ],

    config: {

        views: [
            'TimeControlsPanel'
        ],

        // loginButton: '#loginWindow button[action=login]',

        // "In the refs configuration, you can set up references to view instances. 
        //     This allows you to retrieve and manipulate components on the page inside of your controller’s actions."
        // "refs create a reference to a component ... basically using Ext.ComponentQuery#down."
        // "put a reference to a view instance (component) inside of a controller."
        // localVarName : itemId
        refs: {
            timeControlsPanel:  'timeControlsPanel',
            volumeSlider:       '#timeControlsPanel #volumeSlider',
            btnPlayPause:       '#timeControlsPanel #btnPlayPause',
            btnBack30m:         '#timeControlsPanel #back30m',
            btnBack10m:         '#timeControlsPanel #back10m',
            btnBack5m:          '#timeControlsPanel #back5m',
            btnBack1m:          '#timeControlsPanel #back1m',
            btnBack10s:         '#timeControlsPanel #back10s',
            btnForward10s:      '#timeControlsPanel #forward10s',
            btnForward1m:       '#timeControlsPanel #forward1m',
            btnForward5m:       '#timeControlsPanel #forward5m',
            btnForward10m:      '#timeControlsPanel #forward10m',
            btnForward30m:      '#timeControlsPanel #forward30m'
        },

        // this is different in touch; i use an `init` method in ExtJS
        control: {
            volumeSlider:    { change: 'onVolumeSliderChange' },
            btnPlayPause:    { tap: 'onPlayPauseButtonTapped' },
            btnBack30m:      { tap: 'onBack30mTapped' },
            btnBack10m:      { tap: 'onBack10mTapped' },
            btnBack1m:       { tap: 'onBack1mTapped' },
            btnBack10s:      { tap: 'onBack10sTapped' },
            btnForward10s:   { tap: 'onForward10sTapped' },
            btnForward1m:    { tap: 'onForward1mTapped' },
            btnForward5m:    { tap: 'onForward5mTapped' },
            btnForward10m:   { tap: 'onForward10mTapped' },
            btnForward30m:   { tap: 'onForward30mTapped' }
        }

    },

    onBack30mTapped: function(button, e, eOpts) {
        var encoded = Ext.urlEncode({ value: '-1800' });
        VP.util.Util.callRestUrl('/server/seek?' + encoded, 'GET');
    },

    onBack10mTapped: function(button, e, eOpts) {
        var encoded = Ext.urlEncode({ value: '-600' });
        VP.util.Util.callRestUrl('/server/seek?' + encoded, 'GET');
    },

    onBack5mTapped: function(button, e, eOpts) {
        var encoded = Ext.urlEncode({ value: '-300' });
        VP.util.Util.callRestUrl('/server/seek?' + encoded, 'GET');
    },

    onBack1mTapped: function(button, e, eOpts) {
        var encoded = Ext.urlEncode({ value: '-60' });
        VP.util.Util.callRestUrl('/server/seek?' + encoded, 'GET');
    },

    onBack10sTapped: function(button, e, eOpts) {
        var encoded = Ext.urlEncode({ value: '-10' });
        VP.util.Util.callRestUrl('/server/seek?' + encoded, 'GET');
    },

    onForward10sTapped: function(button, e, eOpts) {
        var encoded = Ext.urlEncode({ value: '+10' });
        VP.util.Util.callRestUrl('/server/seek?' + encoded, 'GET');
    },

    onForward1mTapped: function(button, e, eOpts) {
        var encoded = Ext.urlEncode({ value: '+60' });
        VP.util.Util.callRestUrl('/server/seek?' + encoded, 'GET');
    },

    onForward5mTapped: function(button, e, eOpts) {
        var encoded = Ext.urlEncode({ value: '+300' });
        VP.util.Util.callRestUrl('/server/seek?' + encoded, 'GET');
    },

    onForward10mTapped: function(button, e, eOpts) {
        var encoded = Ext.urlEncode({ value: '+600' });
        VP.util.Util.callRestUrl('/server/seek?' + encoded, 'GET');
    },

    onForward30mTapped: function(button, e, eOpts) {
        var encoded = Ext.urlEncode({ value: '+1800' });
        VP.util.Util.callRestUrl('/server/seek?' + encoded, 'GET');
    },

    onPlayPauseButtonTapped: function(button, e, eOpts) {
        Ext.Ajax.request({
            url: '/server/turnEverythingOff',
            method: 'GET',
            success: function(conn, response, options, eOpts) {
                var result = VP.util.Util.decodeJSON(conn.responseText);
                if (result.success) {
                    // console.log('SUCCESS!');
                } else {
                    // console.log('ERROR!');
                    VP.util.Util.showErrorMsg(result.msg);
                }
            },
            failure: function(conn, response, options, eOpts) {
                // TODO get the 'msg' from the json and display it
                VP.util.Util.showErrorMsg(conn.responseText);
            }
        });
    },

    onVolumeSliderChange: function(slider, thumb, newValue, oldValue, eOpts) {
        Ext.Ajax.request({
            url: '/server/setVolume?volume=' + newValue,
            method: 'GET',
            success: function(conn, response, options, eOpts) {
                var result = VP.util.Util.decodeJSON(conn.responseText);
                if (result.success) {
                    // ignore
                } else {
                    VP.util.Util.showErrorMsg(result.msg);
                }
            },
            failure: function(conn, response, options, eOpts) {
                // TODO get the 'msg' from the json and display it
                VP.util.Util.showErrorMsg(conn.responseText);
            }
        });
    }

});

The refs documentation/comments come from a few different internet queries; sorry I don’t remember the original sources.

The Sencha Touch Panel/view

You can’t understand that refs code without also seeing the Sencha Touch Panel/view that it works with, so here’s that code as well:

Ext.define('RadioMobile.view.TimeControlsPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.timeControlsPanel',

    requires: [
        'Ext.TitleBar',
        'Ext.slider.Slider',
        'Ext.dataview.List'
    ],

    // fullscreen: true,
    config: {
        xtype: 'timeControlsPanel',
        itemId: 'timeControlsPanel',
        title: 'Controls',
        iconCls: 'settings',
        scrollable: 'vertical',

        layout: {
            type: 'vbox',
            align: 'stretch',
            pack: 'start'
        },

        // defaults: {
        //     flex: 1
        // },
        items: [
            {
                docked: 'top',
                xtype: 'titlebar',
                title: 'Controls'
            },
            {
                xtype: 'container',
                layout: {
                    type: 'hbox',
                    pack: 'justify'
                },
                flex: 1,     // flex vertical height
                defaults: {
                    xtype: 'button',
                    flex: 1, // flex row width (buttons in the row)
                },
                items: [
                    {
                        text: '-30m',
                        itemId: 'back30m'
                    },
                    {
                        text: '-10m',
                        itemId: 'back10m'
                    },
                    {
                        text: '-5m',
                        itemId: 'back5m',
                    },
                    {
                        text: '-1m',
                        itemId: 'back1m',
                    },
                    {
                        text: '-10s',
                        itemId: 'back10s',
                    },
                ]
            },

            {
                xtype: 'container',
                layout: {
                    type: 'hbox'
                },
                flex: 1,
                defaults: {
                    xtype: 'button',
                    flex: 1, // flex row width (buttons in the row)
                },
                items: [
                    {
                        text: '>',
                        itemId: 'btnPlayPause',
                        tooltip: 'Play/Pause'
                    }
                ]
            },

            {
                xtype: 'container',
                layout: {
                    type: 'hbox'
                },
                flex: 1,
                defaults: {
                    xtype: 'button',
                    flex: 1, // flex row width (buttons in the row)
                },
                items: [
                    {
                        text: '10s',
                        itemId: 'forward10s'
                    },
                    {
                        text: '1m',
                        itemId: 'forward1m',
                    },
                    {
                        text: '5m',
                        itemId: 'forward5m',
                    },
                    {
                        text: '10m',
                        itemId: 'forward10m',
                    },
                    {
                        text: '30m',
                        itemId: 'forward30m',
                    }
                ]
            },
            {
                xtype: 'slider',
                itemId: 'volumeSlider',
                flex: 0.7,
                value: 60,
                increment: 5,
                minValue: 0,
                maxValue: 100,
                style: 'margin-top: 22px;',
            }
        ]
    }

});

That’s a lot of code to just throw out here like this, but if you needed to see a refs example (along with some documentation), I hope this helps.