Magnus
Reputation: 18778
List won't display items in LocalStorage on launch
Using Sencha Touch 2.4.1, I have a List that displays currencies, a FormPanel where the user can add new currencies. The store is "prepopulated" with two items, and they are displayed correctly in the List. When the user adds new items they are also displayed correctly in the List.
But when the app is restarted, I'm back to square one again - only the "prepopulated" items are displayed in the List - any items that were added on the last app execution have disappeared. Although I can see them all in the Local Storage in Google Chrome's Developer Tools... why aren't they displayed in my List?
STORE
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');
}
});
LIST PANEL
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);
}
})
],
},
});
EDITOR PANEL
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');
}
}
]
},
]
}
});
MODEL
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'
}
],
}
});
LocalStorage in Google Chrome
Upvotes: 0
Views: 85
Answers (1)
Viswa
Reputation: 3211
You need to change few configuration in Store and List.
Changes in Store
- Load,beforeSync and addrecords are listeners So, place it inside listeners
- Listeners should be inside config
- Don't need to repeat
model: 'DebtManager.model.Currency'inside proxy
Updated Store
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');
}
}
}
});
Changes in List
- You defined list using
Ext.create, Not sure about this. I changed it - onItemDisclosure,show are listeners So, place it inside listeners
- Use storeId for connecting list with store like
store: 'CurrencyStore'instead ofstore: Ext.create('DebtManager.store.Currency') - Don't use predefined
xtypefor your custom views so, i changedxtype: 'panel'toxtype: 'currencyListPanel'
Updated 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);
}
}
}
],
},
});
Additional Note
Use itemId with getComponent() instead of id with getCmp().
To know more See This Screencast
Finally, Here is the complete code in Sencha fiddle
Upvotes: 1
Related Questions
- Sencha localStorage.getItem() returns null in model
- list view is not populated in sencha touch 2 of localstorage web sql data
- Sencha touch2, data in localstore not getting into localstorage
- How to load localstorage data in list view in sencha touch?
- Store array Data Object in localStorage using sencha touch
- Sencha Touch 2.0.1.1 Local Store not saving values
- Sencha Touch - localstorage problems
- Sencha Touch JSON loading to localstorage not working?
- Using localStorage in store in Sencha Touch
- localStorage accessible only after refresh