将现有localstorage数据加载到商店并将其绑定到sencha中的select字段

时间:2014-03-06 15:41:05

标签: javascript html5 extjs sencha-touch-2 local-storage

嗨,大家好需要你的帮助来加载localstorage。

我想从本地存储中自动加载现有记录。

然后将其绑定到存储并选择字段。

我想加载现有记录,这样当我在localstorage中添加新记录时,它不会覆盖现有的ID记录。

以下是我的一些代码

app.js

Ext.application({
    name: 'IO',

    requires: [
        'Ext.MessageBox'
    ],

    views: [
        'Main'
    ],

    stores: [
        'Files'
    ],

    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },

    isIconPrecomposed: true,

    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('IO.view.Main'));
    },

    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

Files.js - 存储

Ext.define('IO.store.Files', {
    extend: 'Ext.data.Store',
    alias: 'store.Files',

    requires: [
        'IO.model.File'
    ],

    config: {
        model: 'IO.model.File',
        storeId: 'filestore',
        proxy: {
            type: 'localstorage',
            id: 'filestoreproxy'
        },
                autoLoad: true
    }
});

File.js - 模型

Ext.define('IO.model.File',{
     extend: 'Ext.data.Model',
     alias: 'model.File',

       config: {
           fields: [
               {
                  name: 'id',
                  type: 'int'
               },
               {
                  name: 'name',
                  type: 'string'
               }
           ]
     }
});

NumberListIO - 查看

Ext.define('IO.view.NumberListIO', {
    extend: 'Ext.field.Select',
    xtype: 'numberiolist',
    id: 'IOSelectField',
    cls: 'IOListSelectOption',
    config:{
        xtype: 'selectfield',
        name: 'test',
        options: [
            {
                text: "--- Select List ---",
                value: ""
            }
        ],
        store: 'filestore',
        displayField: 'name',
        valueField: 'id'        
    }
});

1 个答案:

答案 0 :(得分:0)

我已经明白了。

我已在应用启动时将本地存储数据加载到商店

这是我的代码

// Initialize localstorage
    var options = [];
    var numbers = [];

    for (i=0; sKey = window.localStorage.key(i); i++) {
        if(sKey.indexOf("filestoreproxy-ID_") !== -1){  

            tmp = JSON.parse(window.localStorage.getItem(sKey));

            var myFile = Ext.create('IO.model.File',{
                 id: tmp.id,
                 name:  tmp.name
            });

            options.push(myFile);

        }else if(sKey.indexOf("numberstoreproxy-ID_") !== -1){

            tmp = JSON.parse(window.localStorage.getItem(sKey));

            var myNumber = Ext.create('IO.model.Number',{
                 id: tmp.id,
                 file_id: tmp.file_id,
                 value: tmp.value,
                 frequency: tmp.frequency
            });

            numbers.push(myNumber);
        }
    }

    Ext.getStore('filestore').load(this, options);
    Ext.getStore('numberstore').load(this, numbers);