讓sencha應用程序可供離線使用

Question

我正在嘗試使sencha應用程序可脫機使用，但我無法從store.start加載服務器數據。我被困在ta如何使其脫機。

以下是我已經嘗試了代碼：

我的店：

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 
}); 

} 
}); 

我不能夠讓offline.I試圖煎茶的脫機導師了。任何指導。

在此先感謝您的支持。

Answer 1

好吧，我發現我的錯誤，我忘記了創建離線本地存儲。因爲我們知道，我們需要創建離線存儲模型，在該模型中我忘了保持代理：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' 
     } 
    ] 
} 
}); 

希望這將幫助別人。

Answer 2

我認爲下面的線被清除本地存儲：

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

嘗試刪除它