列表不会在启动时显示 LocalStorage 中的项目

Question

使用 Sencha Touch 2.4.1，我有一个显示货币的列表，一个用户可以在其中添加新货币的 FormPanel。该商店 "prepopulated" 有两个项目，它们在列表中正确显示。当用户添加新项目时，它们也会正确显示在列表中。

但是当应用程序重新启动时，我又回到原点 - 列表中只显示 "prepopulated" 项目 - 上次应用程序执行时添加的任何项目都消失了。虽然我可以在 Google Chrome 的开发者工具的本地存储中看到它们...为什么它们没有显示在我的列表中？

商店

Ext.define('DebtManager.store.Currency', {
    extend : 'Ext.data.Store',

    requires : [
        'DebtManager.model.Currency',
        'Ext.data.proxy.LocalStorage'
    ],

    config : {
        autoLoad: true,
        model: 'DebtManager.model.Currency',
        storeId: 'CurrencyStore',

        sorters: [{
            property: 'title',
            direction: 'ASC'
        }],

        proxy: {            
            type: 'localstorage',
            model: 'DebtManager.model.Currency',
            id: 'currenciesLocalstore', // The name of the LocalStorage

            reader: {
                type: 'json',
                rootProperty: 'currencies'
            }            
        },


        data: [
            {
                id: 1,   
                title: 'USD',
                dollarExchangeRate: '1.0'
            },
            {
                id: 2,   
                title: 'SEK',
                dollarExchangeRate: '8.4'
            }
        ]        
    },


    load : function (store, records, success, opr) {
        console.log('Store loaded.');   
    },

    beforeSync : function (options, eOpts) {
        console.log('Syncing store...');   
    },

    addrecords : function( store, records, eOpts ){
        console.log('Record(s) added to store');
    }

});

列表面板

Ext.define('DebtManager.view.CurrenciesListPanel', {
    extend: 'Ext.tab.Panel',
    xtype: 'panel',

    requires: [
        'DebtManager.store.Currency',       
    ],

    config: {
        title: 'Currencies',
        iconCls: 'action',  

        layout: 'fit',

        items: [
            {
                docked: 'top',      
                xtype: 'titlebar',
                title: 'Currencies tab',
                items: [
                    { xtype: 'spacer' },
                    {
                        id: 'newNoteButton',
                        text: 'Add',
                        ui: 'action',

                        handler: function () {                          
                            console.log('Add currency');
                            var editorPanel = Ext.create('DebtManager.view.CurrencyEditorPanel');
                            var currency = Ext.create( 'DebtManager.model.Currency', {title: 'xxx', dollarExchangeRate: '100'} );                           
                            editorPanel.setRecord( currency );                          
                            Ext.Viewport.setActiveItem( editorPanel, {type: 'slide', direction: 'left'});                           
                        }
                    }
                ]               
            },
            Ext.create('Ext.List', {
                id: 'currenciesListPanelList',
                title: 'Currencies list',
                store: Ext.create('DebtManager.store.Currency'), 
                itemTpl: '<div class="list-item-title">{title}</div>' + '<div class="list-item-narrative">{dollarExchangeRate}</div>',

                onItemDisclosure: function (record) {
                    // Edit item
                    console.log('Edit item');
                },

                show: function (list, opts) {
                    console.log('List Shown: ' + list);
                }

            })
        ],        

    },

});

编辑器面板

Ext.define('DebtManager.view.CurrencyEditorPanel', {
    extend: 'Ext.form.FormPanel',

    requires: [
        'DebtManager.store.Currency',
    ],

    config: {        
        fullscreen: true,
        title: 'Edit currency',

        items: [
            {
                docked: 'top',      
                xtype: 'toolbar',
                title: 'Edit currency',
                items: [
                    {
                        id: 'backButton',
                        text: 'Back',
                        ui: 'back',

                        handler: function () {                          
                            Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true); // Remove this panel                           
                        }
                    },
                    { xtype: 'spacer' },
                    {
                        id: 'saveButton',
                        text: 'Save',
                        ui: 'action',

                        handler: function () {                          
                            console.log('Save');

                            var editor = Ext.Viewport.getActiveItem(); 
                            var currentCurrency = editor.getRecord();
                            editor.updateRecord( currentCurrency );



                            var store = Ext.data.StoreManager.lookup('CurrencyStore');

                            if (store.findRecord('id', currentCurrency.getData().id) === null) {
                                console.log('Adding record to store...');
                                console.log( currentCurrency );
                                store.add(currentCurrency);
                            } else {
                                console.log('Marking record as dirty...');
                                currentCurrency.setDirty();
                            }

                            store.sync();


                            Ext.getCmp('currenciesListPanelList').refresh();

                            Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true); // Remove this panel                           

                        }
                    }
                ]               
            },
            {
                xtype: 'textfield',
                name: 'id',
                label: 'ID',
                required: true
            },            
            {
                xtype: 'textfield',
                name: 'title',
                label: 'Title',
                required: true
            },            
            {
                xtype: 'textfield',
                name: 'dollarExchangeRate',
                label: 'USD Exchange Rate',
                required: true
            },
            {
                docked: 'bottom',      
                xtype: 'toolbar',                
                items: [
                    { xtype: 'spacer' },
                    {
                        id: 'deleteButton',
                        iconCls: 'trash',
                        iconMask: true,

                        handler: function () {                          
                            console.log('Delete');
                        }
                    }
                ]               
            },

        ]
    }
});

型号

Ext.define('DebtManager.model.Currency', {
    extend: 'Ext.data.Model',

    requires: [
    ],

    config: {
        idProperty: 'id',        
        identifier: { 
            type: 'uuid',
            isUnique : true 
        }, 

        fields: [
            {
                name: 'title',
                type: 'string'
            },
            {
                name: 'dollarExchangeRate',
                type: 'string'
            }
        ],
    }
});

本地存储在 Google Chrome

Answer 1

您需要更改 Store 和 List 中的一些配置。

商店变化

Load、beforeSync 和 addrecords 是 listeners 所以，把它放在 listeners 里面
监听器应该在配置中
里面不需要重复model: 'DebtManager.model.Currency' 代理

已更新商店

Ext.define('DebtManager.store.Currency', {
    extend : 'Ext.data.Store',

    requires : [
        'DebtManager.model.Currency',
        'Ext.data.proxy.LocalStorage'
    ],

    config : {
        autoLoad: true,
        model: 'DebtManager.model.Currency',
        storeId: 'CurrencyStore',

        sorters: [{
            property: 'title',
            direction: 'ASC'
        }],

        proxy: {            
            type: 'localstorage',
            id: 'currenciesLocalstore', // The name of the LocalStorage
        },


        listeners : {
            load : function (store, records, success, opr) {
                console.log('Store loaded.');   
            },

            beforeSync : function (options, eOpts) {
                console.log('Syncing store...');   
            },

            addrecords : function( store, records, eOpts ){
                console.log('Record(s) added to store');
            }        
        }
    }
});

列表更改

您使用 Ext.create 定义了列表，对此不确定。我变了它
onItemDisclosure,show are listeners 所以，把它放在listeners里面
使用 storeId 将列表与商店连接起来，例如 store: 'CurrencyStore' 而不是 store: Ext.create('DebtManager.store.Currency')
不要为您的自定义视图使用预定义的 xtype 所以，我更改了 xtype: 'panel' 到 xtype: 'currencyListPanel'

已更新 TabPanel

Ext.define('DebtManager.view.CurrenciesListPanel', {
    extend: 'Ext.tab.Panel',
    xtype: 'currencyListPanel',

    requires: [
        'DebtManager.store.Currency',       
    ],

    config: {
        title: 'Currencies',
        iconCls: 'action',  

        layout: 'fit',

        items: [
            {
                docked: 'top',      
                xtype: 'titlebar',
                title: 'Currencies tab',
                items: [
                    { xtype: 'spacer' },
                    {
                        id: 'newNoteButton',
                        text: 'Add',
                        ui: 'action',

                        handler: function () {                          
                            console.log('Add currency');
                            var editorPanel = Ext.create('DebtManager.view.CurrencyEditorPanel');
                            var currency = Ext.create( 'DebtManager.model.Currency', {title: 'xxx', dollarExchangeRate: '100'} );                           
                            editorPanel.setRecord( currency );                          
                            Ext.Viewport.setActiveItem( editorPanel, {type: 'slide', direction: 'left'});                           
                        }
                    }
                ]               
            },
            {
                xtype : 'list',
                id: 'currenciesListPanelList',
                title: 'Currencies list',
                onItemDisclosure: true,
                store: 'CurrencyStore', 
                itemTpl: '<div class="list-item-title">{title}</div>' + '<div class="list-item-narrative">{dollarExchangeRate}</div>',
                listeners : {
                    onItemDisclosure: function (record) {
                        // Edit item
                        console.log('Edit item');
                    },

                    show: function (list, opts) {
                        console.log('List Shown: ' + list);
                    }                    
                }

            }
        ],        

    },

});

补充说明

使用 itemId 和 getComponent() 而不是 id 和 getCmp()。

了解更多See This Screencast

最后，完整的代码在Sencha fiddle

列表不会在启动时显示 LocalStorage 中的项目

List won't display items in LocalStorage on launch

local-storage

sencha-touch

sencha-touch-2