列表在启动时不会在LocalStorage中显示项目
使用Sencha Touch 2.4.1，我有一个显示货币的List，一个FormPanel，用户可以在其中添加新货币。商店“预先填充”有两个项目，它们在列表中正确显示。当用户添加新项目时，它们也会在列表中正确显示。
但是当应用程序重新启动时，我又回到了正方形 - 只有“预填充”项目显示在列表中 - 上次应用程序执行时添加的任何项目都已消失。虽然我可以在Google Chrome的开发者工具的本地存储中看到它们...为什么它们不会显示在我的列表中？
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');
}
});
列表面板
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'
}
],
}
});
Google Chrome中的LocalStorage
1 个答案:
答案 0 :(得分：1)
您需要在商店和列表中更改一些配置。
商店中的更改
- 加载，beforeSync和addrecords是监听器所以，将它放在监听器中
- 听众应该在config 中
- 不要在里面重复
model: 'DebtManager.model.Currency'代理 - 您使用
Ext.create定义了列表，对此不确定。我变了 它 - onItemDisclosure，show是监听器所以，将它放在监听器中
- 使用storeId将列表与
store: 'CurrencyStore'而不是store: Ext.create('DebtManager.store.Currency')等商店联系起来
- 不要使用预定义的
xtype作为自定义视图，所以我改变了xtype: 'panel'至xtype: 'currencyListPanel'
更新商店
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');
}
}
}
});
列表中的更改
更新了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()使用div.menu {
background-color: yellow;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 120px;}
。
最后，以下是Sencha fiddle
中的完整代码
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？