Sencha Touch離線存儲功能是本文要介紹的內容，主要是來了解Sencha Touch的一些學習方法及功能的使用，具體內容來看本文詳解。

先看下效果圖：

該小應用實現了數據離線存儲功能，其實就是把數據保存在客戶端，HTML5它支持數據庫存儲，保存在web SQL中的數據是不會隨著瀏覽器的緩存的清除而被清除。

該項目的代碼編寫風格采用了MVC模式，從上圖中可以看出。

Controllers中是業務邏輯代碼，models中是實體，views中存放的就是頁面。

一、程序在初始化的時候要創建數據庫或者打開數據庫，并得到數據庫對象。

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

二、創建出各個Panel

我z總共創建了TaskList.js、TaskDetail.js、AddTask.js

三、各個Panel之間的跳轉，銜接

我創建了TaskCon.js，代碼如下：

Ext.regController('taskCon',{  
addTask:function(){  
var taskForm = Ext.getCmp('taskForm');  
var task = taskForm.getValues();  
//將數據保存到客戶端的數據庫中  
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');  
}  
}); 

可以看出它的作用就相當于Struts中的Action。

HTML5越來越強大啦……

伴隨著HTML5的發展在若干年后手機上也會逐漸走向BS路線的。

小結：解析Sencha Touch離線存儲功能的內容介紹完了，希望通過本文的學習能對你有所幫助！