Question

我正在尝试使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的离线导师。任何指导。

提前感谢您的支持。

Answer 1

我认为以下一行是清算当地商店：

localStore.load(); // This causes the "loading" mask to disappear

尝试删除它

Answer 2

好的，我发现我的错误，我忘了创建离线本地存储。我们知道我们需要为离线存储创建模型，在该模型中我忘记保留 proxy：localstorage ，我的代码片段如下：

Ext.define('Sencha.model.ContactOffline', {
extend: 'Ext.data.Model',
config: {
    fields: [
    {name: 'status', mapping: 'status'},
    {name: 'message', mapping: 'message'},
    {name:'data', mapping: 'data'},
    {name: 'definitions', mapping: 'definitions.defintion'},
    {name: 'ratings', mapping: 'definitions.rating'},
    ],

    identifier:'uuid',
    proxy: {
      type: 'localstorage',
      id  : 'todaysword'
  },
   hasMany: [
        {
            model: 'Sencha.model.MenuOffline',
            autoLoad: true,
            name: 'data'
      }
    ]
}
});

希望它会对某人有所帮助。

使sencha app可以离线使用

2 个答案: