Notes from adventures with sencha touch

senchatouch.md

Sencha Touch

Project Variables

site constants (or statics) can be included in the application via requires:[] in Ext.application({})

Ext.application({
    name: 'SenchaMobile'

    , requires: [
        'SenchaMobile.config.Constants'
    ]

Where 'SenchaMobile.config.Constants' is

Ext.define('UXSenchaMobile.config.Constants', {
    singleton : true,
    alias : 'widget.appConfigUtil',
    config : {
        baseUrl : 'xx.xx.xx.xxx',
    },
    constructor: function(config) {
        this.initConfig(config);
        this.callParent([config]);
    }
})

http://www.sencha.com/forum/showthread.php?144317-Where-do-I-define-global-constants-for-my-app-namespace

http://stackoverflow.com/questions/16074155/global-variable-sencha-touch-2-1

Class system

http://www.sencha.com/learn/sencha-class-system

Ext.define

remember to place arguments in the config because the other way, which many tutorial show, is deprecated

getController function

• returns value of controller
• http://stackoverflow.com/questions/10669647/call-controllers-function-from-another-controller-share-data-between-controll

ComponentQuery

http://docs.sencha.com/touch/2.2.1/#!/api/Ext.ComponentQuery

A comprehensive set of examples and selectors would be nice. For example I didn't know there was a ^ selector for selecting ancestors, that would have saved a bunch of work. I didn't find it until I was trying to figure out something in the code.

So here's an example:

Ext.ComponentQuery('checkboxfield^container'); This query will return all containers that have checkboxfields in them.

Ext.ComponentQuery('container checkboxfield); This query will return all checkboxfields that are in containers.

Ext.ComponentQuery('container^checkboxfield'); This query will always return empty because there is no way for a checkboxfield to be an ancestor of a container.

Store

Needs a model to reference to

renderto : idOfElement

will render the app to that element on an html page

Controllers

refs

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            nav: '#mainNav',

            infoPanel: {
                selector: 'tabpanel panel[name=fish] infopanel',
                xtype: 'infopanel',
                autoCreate: true
            }
        }
    }
});

Usually, a ref is just a key/value pair - the key ('nav' in this case) is the name of the reference that is to be generated, while the value ('#mainNav' in this case) is the ComponentQuery selector used to find the Component.

Refs can also be passed additional options, beyond name and selector. These options are autoCreate and xtype, which are almost always used together

getter functions

This getter function is automatically generated based on the refs you define and always follows the same format - 'get', followed by the capitalized ref name.

controller

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        control: {
            loginButton: {
                tap: 'doLogin'
            },
            'button[action=logout]': {
                tap: 'doLogout'
            }
        },

        refs: {
            loginButton: 'button[action=login]'
        }
    },

    doLogin: function() {
        // called whenever the Login button is tapped
    },

    doLogout: function() {
        // called whenever any Button with action=logout is tapped
    }
});

the means by which your Controller listens to events fired by app Components and reacts in some way. The Control config accepts both ComponentQuery selectors and refs as its keys, and listener objects as values

Environment detection

http://docs.sencha.com/touch/2.1.1/#!/guide/environment_package

Layout

http://docs.sencha.com/touch/2.2.1/#!/guide/layouts

default layout type is auto

layout: 'fit' - fills available height and width of the viewport - one component only

layout: 'card' - contains multiple components but displays only one at a time

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

http://try.sencha.com/touch/2.0.0/docs/Ext.layout.HBox.1/

Output store

var store = Ext.getStore('NavigationStore');
store.load({callback: function(records, operation, success) {
        // the operation object contains all of the details of the load operation
        console.log(records);
    },
    scope: this
});

Ext.getStore('NavigationStore').getProxy().getReader().rawData.data[0]

http://stackoverflow.com/questions/17307960/sencha-touch-2-2-load-store-from-json-data-goes-to-raw-column

Creating Search

http://docs.sencha.com/touch/2.2.1/#!/api/Ext.field.Search

Custom Dataviews

http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2

Custom Components

http://www.sencha.com/blog/building-sencha-touch-customer-components-part-1

Some events aren't seen by Controller and must be in view

http://www.sencha.com/forum/showthread.php?194024-Not-catching-the-initialize-and-painted-event

Tutorials

http://mobile.tutsplus.com/tutorials/mobile-web-apps/create-a-location-aware-site-with-sencha-touch/

http://mobile.tutsplus.com/tutorials/mobile-web-apps/create-a-location-aware-site-with-sencha-touch-displaying-locations/

http://miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-1/

https://github.com/nelstrom/Sencha-Touch-templates-demo

Unit Testing

http://vimeo.com/58665998

http://www.sencha.com/blog/automating-unit-tests

Application Testing

http://www.bryntum.com/blog/testing-a-sencha-touch-application/

http://www.sencha.com/blog/ui-testing-a-sencha-app