Question

I am learning Sencha Touch. I am having a strange issue. A view using select field is not showing it on Android emulator, but it does in Google Chrome. It worked fine before, I cannot guess what changed to “break” it.

In the emulator logcat I can see these three messages:

E/ActivityThread(243): Failed to find provider info for android.server.checkin

W/Checkin(243): Can’t update stat BROWSER_SNAP_CENTER: java.lang.IllegalArgumentException: Unknown URL content://android.server.checkin/stats

D/CordovaLog(243): undefined: Line 1 : TypeError: Result of expression ‘c’ [null] is not a constructor.

Sometimes only the third is shown.
Hereafter the view code:

(function() {
    var setSettingValue = function(component, query, value) {
        var c = component.query(query);
        if (c && value && (c.length > 0)) {
            c[0].setValue(value);
        }
    };
    var createToolbar = function () {
    return Ext.create('Ext.Toolbar', {
        xtype: 'toolbar',
        docked: 'bottom',
        layout: { pack: 'center' },
        items: [
            { 
                iconMask: true, ui: 'normal', iconCls: 'info',
                itemId: 'infoButton'
            },
            { xtype: 'spacer' },
            { 
                iconMask: true, ui: 'normal', iconCls: 'reply',
                itemId: 'backButton'
            }
        ]
    })};
    Ext.define('MyWF.view.Settings', {
        extend: 'Ext.Container',
        initialize: function ()
        {
            this.setItems([createToolbar()]);
            this.callParent();
        },
        config : {
            layout : 'vbox',
            padding : '0 10',
            scrollable: {
                direction: 'vertical'
            },
            onBackAction: function () { console.log('back'); },
            onInfoAction: function () { console.log('info'); },
            listeners: [{
                delegate: "#backButton",
                event: 'tap',
                fn: 'onBackAction'
            },
            {
                delegate: "#infoButton",
                event: 'tap',
                fn: 'onInfoAction'
            },
            {
                event: 'show',
                fn: function(component, eOpts) {
                    setSettingValue(component, 'selectfield[name=windMU]','kmh');
                    setSettingValue(component,'selectfield[name=temperatureMU]','C');
                }
            }],
            items : [{
                xtype : 'fieldset',
                title : 'Measure units',
                items : [{
                    xtype : 'selectfield',
                    name : 'temperatureMU',
                    label : 'Temperature',
                    labelAlign: 'top',
                    listeners : {
                        change : function(selectField, newData, oldData, eOpts) {
                            alert('Your choice is: ' + newData);
                        }
                    },
                    options : [{
                        text : 'Celsius',
                        value : 'C'
                    }, {
                        text : 'Farenheit',
                        value : 'F'
                    },]
                }, {
                    xtype : 'selectfield',
                    name : 'windMU',
                    label : 'Wind speed',
                    labelAlign : 'top',
                    listeners : {
                        change : function(selectField, newData, oldData, eOpts) {
                            alert('Your choice is: ' + newData);
                        }
                    },
                    options : [{
                        text : 'Kilometers per hour',
                        value : 'km/h'
                    }, {
                        text : 'Meters per second',
                        value : 'm/s'
                    }, {
                        text : 'Miles per hour',
                        value : 'MPH'
                    }, {
                        text : 'Knots',
                        value : 'kn'
                    }]
                }]
            },]
        }
    });
})();

Thanks for any suggestion

Answer 1

Well I got some time to fix the issue.
First of all I add a lacking information to the question: I was running the app with a custom build of the Sencha Touch library, the library version is 2.0.1.1.

On Google Chrome the select field (Ext.field.Select) creates by default an Ext.dataview.List instance for the list of choiches, while on a phone an Ext.picker.Picker is created.

But Ext.picker.Picker also creates an Ext.TitleBar, that was lacking in my custom build of sencha library, while the Ext.dataview.List class is in.

So the application can show the select field in Chrome, but it cannot in the emulator, and it gives the unclear message, because the libary build is compressed and obfuscated.

There are two solutions:

1. you can force the use of a list also in the emulator or phone. The class Ext.picker.Picker has a creation option for this: “usePicker: false”, by default set to “auto”.

2. or, better, add an explicit reference to the title bar component in the app file: “Ext.require(‘Ext.TitleBar’);” to include it in the library build.

I saw the problem forcing the use of the picker in Chrome, by setting the picker configuration “usePicker: true“, and running the app with the debug library build “sencha-touch-debug.js”, see http://docs.sencha.com/touch/2-0/#!/api/Ext.Loader, and http://docs.sencha.com/touch/2-0/#!/guide/building .

Then in the Chrome console, as well in the Android emulator logcat, I saw the clear message:

[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.TitleBar'; 
consider adding 'Ext.TitleBar' explicitly as a require of the corresponding class 

A suggestion: in the logcat is better to filter the many messages, for example writing “Ext.Loader” in the filter mask.