Remember selectfield sencha touch

Question

How to store the selectfield in sencha touch, such that when a field is selected, the value used by any method, but when the page refreshed, it is automatically select the previous selection.

My Code:

          {
                xtype: 'fieldset',
                items: [{
                    xtype: 'selectfield',
                    id: 'remem',
                    label: 'MY Label',
                    store: 'remem',
                    options: [
                    {
                        text: 'Option1',
                        value: 'a'
                    },
                     {
                        text: 'Option2',
                        value: 'b'
                    }]
}]
}

mindparse mindparse · Accepted Answer · 2015-02-09T08:19:13

@developer, @jenson and I are suggesting you should save the value in a cookie so the value is persisted between browser refreshes. Extjs offers a cookie manager class in the utilities namespace if I remember correct.

EDIT

For Sencha Touch you should actually make use of the LocalStorage proxy as per the docs here There's an example in the docs showing how to save user specific information for retrieval later on (after refreshes, etc)

I have actually made use of this for my own application by saving user display preferences in my application so when they next login the UI is as they left it.

Store:

Ext.define('MyApp.store.UserPreferencesStore', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.UserPreferencesModel',
        'Ext.data.proxy.LocalStorage'
    ],

    config: {
        model: 'MyApp.model.UserPreferencesModel',
        storeId: 'UserPreferencesStore',
        proxy: {
            type: 'localstorage',
            id: 'userpreferences'
        }
    }
});

Model

Ext.define('MyApp.model.UserPreferencesModel', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.Field'
    ],

    config: {
       fields: [
            {
                name: 'userPrefKey'
            },
            {
                name: 'userPrefValue'
            }
        ]
    }
});

With this setup you can add a record as you normally would do for any other store

store.add({userPrefKey: '01-showMap', userPrefValue: true});

or edit existing entries

rec = store.findRecord('userPrefKey','01-showMap');
rec.set('userPrefValue',false);

You must also call sync() on the store whenever you want to save changes, and to retrieve the saved records from local storage just call load() like for any other store.

Note that my code was written for Touch 2.3, so it may have changed slightly in the most recent 2.4.x version. But this should certainly get you on your way.

Remember selectfield sencha touch

2 Answers