Sencha Touch離線存儲(chǔ)功能是本文要介紹的內(nèi)容，主要是來(lái)了解Sencha Touch的一些學(xué)習(xí)方法及功能的使用，具體內(nèi)容來(lái)看本文詳解。

先看下效果圖：

該小應(yīng)用實(shí)現(xiàn)了數(shù)據(jù)離線存儲(chǔ)功能，其實(shí)就是把數(shù)據(jù)保存在客戶端，HTML5它支持數(shù)據(jù)庫(kù)存儲(chǔ)，保存在web SQL中的數(shù)據(jù)是不會(huì)隨著瀏覽器的緩存的清除而被清除。

該項(xiàng)目的代碼編寫(xiě)風(fēng)格采用了MVC模式，從上圖中可以看出。

Controllers中是業(yè)務(wù)邏輯代碼，models中是實(shí)體，views中存放的就是頁(yè)面。

一、程序在初始化的時(shí)候要?jiǎng)?chuàng)建數(shù)據(jù)庫(kù)或者打開(kāi)數(shù)據(jù)庫(kù)，并得到數(shù)據(jù)庫(kù)對(duì)象。

AppDemo.db = openDatabase("db_task","1.0","taskDatabase",100*1024);  
AppDemo.db.transaction(function(transaction){  
var sql = "CREATE TABLE IF NOT EXISTS 'task'(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,name TEXT,date DATETIME,description TEXT)";  
transaction.executeSql(sql);  
}); 

二、創(chuàng)建出各個(gè)Panel

我z總共創(chuàng)建了TaskList.js、TaskDetail.js、AddTask.js

三、各個(gè)Panel之間的跳轉(zhuǎn)，銜接

我創(chuàng)建了TaskCon.js，代碼如下：

Ext.regController('taskCon',{  
addTask:function(){  
var taskForm = Ext.getCmp('taskForm');  
var task = taskForm.getValues();  
//將數(shù)據(jù)保存到客戶端的數(shù)據(jù)庫(kù)中  
AppDemo.db.transaction(function(transaction){  
var SQL = "INSERT INTO task(name,date,description)values(?,?,?)";  
transaction.executeSql(SQL,[task.name,new Date(task.date).format('Y-m-d'),task.description]);  
});  
taskForm.reset();  
this.findAllTask();  
},  
//查詢所有task  
findAllTask:function(){  
AppDemo.db.readTransaction(function(transaction){  
var SQL = "SELECT * FROM task ORDER BY date DESC";  
transaction.executeSql(SQL,[],function(transaction,results){  
var tasks = new Array();  
for(var i=0;i<results.rows.length;i++){  
var item = results.rows.item(i);  
item.date = new Date(item.date).format('Y-m-d');  
tasks.push(item);  
}  
AppDemo.tasks = tasks;  
AppDemo.taskList = new AppDemo.views.TaskList();  
AppDemo.viewPort.setActiveItem(AppDemo.taskList);  
});  
});  
AppDemo.backButton.hide();  
AppDemo.addButton.show();  
Ext.getCmp('dockedItem').setTitle('Task List');  
},  
deleteTask:function(options){  
var task = options.anotherOption;  
AppDemo.db.transaction(function(transaction){  
var SQL = "DELETE FROM task WHERE id = ?";  
transaction.executeSql(SQL,[task.get('id')]);  
});  
AppDemo.actions.hide();  
this.findAllTask();  
},  
toTaskDetail:function(options){  
AppDemo.backButton.show();  
var task = options.anotherOption;  
AppDemo.taskDetail = new AppDemo.views.TaskDetail();  
AppDemo.taskDetail.setTask(task);  
AppDemo.viewPort.setActiveItem(AppDemo.taskDetail,'slide');  
Ext.getCmp('dockedItem').setTitle('Task Detail');  
}  
}); 

可以看出它的作用就相當(dāng)于Struts中的Action。

HTML5越來(lái)越強(qiáng)大啦……

伴隨著HTML5的發(fā)展在若干年后手機(jī)上也會(huì)逐漸走向BS路線的。

小結(jié)：解析Sencha Touch離線存儲(chǔ)功能的內(nèi)容介紹完了，希望通過(guò)本文的學(xué)習(xí)能對(duì)你有所幫助！