解析Sencha Touch离线存储功能

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离线存储功能的内容介绍完了，希望通过本文的学习能对你有所帮助！