我正在尝试使 sencha 应用程序离线可用,但我无法从商店加载服务器数据。我被困在如何使其离线。
以下是我尝试过的代码:
我的店铺:
Ext.define('MyApp.store.TodaysWord',{
extend: 'Ext.data.Store',
config:
{
autoLoad:true,
model: 'MyApp.model.TodaysWord',
id:'TodaysWord',
proxy:
{
type: 'ajax',
url: 'url',
reader:
{
rootProperty:''
}
}
}
});
我的模型:
Ext.define('MyApp.model.TodaysWord', {
extend: 'Ext.data.Model',
requires: ['MyApp.model.TodaysWordMenu'],
config: {
fields: [
{name: 'status', mapping: 'status'},
{name: 'message', mapping: 'message'},
{name:'data', mapping: 'data'},
{name: 'definitions', mapping: 'definitions.defintion'},
{name: 'ratings', mapping: 'definitions.rating'},
{name:'def_id', mapping:'definitions.def_id'},
],
}
});
Ext.define('MyApp.model.TodaysWordMenu', {
extend: 'Ext.data.Model',
config: {
fields: [
'name',
'author',
'word_id',
'category',
'definition',
'rating',
'def_id',
'example',
'author',
'is_favourite'
],
belongsTo: "MyApp.model.TodaysWord"
}
});
我的观点:
{
xtype: 'list',
cls: 'todayswordhome',
itemCls:"todaysWordLists",
store: 'TodaysWord',
height: 140,
layout: 'fit',
loadingText: "Loading ...",
emptyText: "<div class=\"notes-list-empty-text\">No notes found.</div>",
scrollable: {
direction: 'vertical',
directionLock: true,
},
margin: '0 0 5px 0',
itemTpl: [
'<div>',
'<tpl for="data">',
'<ul class="parabox">',
'<li><h2><b>{name}</b></h2>',
'<tpl for="definitions">',
'<ul class="para-box-wrapper">',
'<li class="{rating}"><div id = "definition" >',
'<div class="paragraph-def"><p>{defintion}</p></div>',
'<span class="authorBox"><i>Author: {author}</i></span>',
'<div id="favourite" class="{is_favourite}" ></div>',
'</div>',
'</li>',
'</ul>',
'</tpl>',
'</li>',
'</ul>',
'</tpl>',
'</div>',
]
}
我的控制器使其离线:
Ext.define('MyApp.controller.Core', {
extend : 'Ext.app.Controller',
config : {
refs : {
homepage : '#homepage'
}
},
init : function () {
var onlineStore = Ext.getStore('TodaysWord'),
localStore = Ext.create('Ext.data.Store', {
model: "MyApp.model.OfflineTodaysWord"
}),
me = this;
localStore.load();
onlineStore.on('refresh', function (store, records) {
// Get rid of old records, so store can be repopulated with latest details
localStore.getProxy().clear();
store.each(function(record) {
var rec = {
name : record.message + ' (from localStorage)' // in a real app you would not update a real field like this!
};
console.log("Offline --->" + name);
localStore.add(rec);
localStore.sync();
console.log("Offline");
});
});
/*
* If app is offline a Proxy exception will be thrown. If that happens then use
* the fallback / local stoage store instead
*/
onlineStore.getProxy().on('exception', function () {
this.gethomePage().setStore(localStore); //rebind the view to the local store
localStore.load(); // This causes the "loading" mask to disappear
Ext.Msg.alert('Notice', 'You are in offline mode', Ext.emptyFn); //alert the user that they are in offline mode
});
}
});
我无法离线。我也尝试过sencha的离线导师。任何指导。
预先感谢您的支持。