解析Sencha Touch离线存储功能

移动开发
Sencha Touch离线存储功能是本文要介绍的内容,主要是来了解Sencha Touch的一些学习方法及功能的使用,具体内容来看本文详解。

Sencha Touch离线存储功能是本文要介绍的内容,主要是来了解Sencha Touch的一些学习方法及功能的使用,具体内容来看本文详解。

先看下效果图:

Sencha Touch离线存储功能     Sencha Touch离线存储功能 

Sencha Touch离线存储功能     Sencha Touch离线存储功能

Sencha Touch离线存储功能    Sencha Touch离线存储功能

该小应用实现了数据离线存储功能,其实就是把数据保存在客户端,HTML5它支持数据库存储,保存在web SQL中的数据是不会随着浏览器的缓存的清除而被清除。

该项目的代码编写风格采用了MVC模式,从上图中可以看出。

Controllers中是业务逻辑代码,models中是实体,views中存放的就是页面。

一、程序在初始化的时候要创建数据库或者打开数据库,并得到数据库对象。

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

二、创建出各个Panel

我z总共创建了TaskList.js、TaskDetail.js、AddTask.js

三、各个Panel之间的跳转,衔接

我创建了TaskCon.js,代码如下:

  1. Ext.regController('taskCon',{  
  2. addTask:function(){  
  3. var taskForm = Ext.getCmp('taskForm');  
  4. var task = taskForm.getValues();  
  5. //将数据保存到客户端的数据库中  
  6. AppDemo.db.transaction(function(transaction){  
  7. var SQL = "INSERT INTO task(name,date,description)values(?,?,?)";  
  8. transaction.executeSql(SQL,[task.name,new Date(task.date).format('Y-m-d'),task.description]);  
  9. });  
  10. taskForm.reset();  
  11. this.findAllTask();  
  12. },  
  13. //查询所有task  
  14. findAllTask:function(){  
  15. AppDemo.db.readTransaction(function(transaction){  
  16. var SQL = "SELECT * FROM task ORDER BY date DESC";  
  17. transaction.executeSql(SQL,[],function(transaction,results){  
  18. var tasks = new Array();  
  19. for(var i=0;i<results.rows.length;i++){  
  20. var item = results.rows.item(i);  
  21. item.date = new Date(item.date).format('Y-m-d');  
  22. tasks.push(item);  
  23. }  
  24. AppDemo.tasks = tasks;  
  25. AppDemo.taskList = new AppDemo.views.TaskList();  
  26. AppDemo.viewPort.setActiveItem(AppDemo.taskList);  
  27. });  
  28. });  
  29. AppDemo.backButton.hide();  
  30. AppDemo.addButton.show();  
  31. Ext.getCmp('dockedItem').setTitle('Task List');  
  32. },  
  33. deleteTask:function(options){  
  34. var task = options.anotherOption;  
  35. AppDemo.db.transaction(function(transaction){  
  36. var SQL = "DELETE FROM task WHERE id = ?";  
  37. transaction.executeSql(SQL,[task.get('id')]);  
  38. });  
  39. AppDemo.actions.hide();  
  40. this.findAllTask();  
  41. },  
  42. toTaskDetail:function(options){  
  43. AppDemo.backButton.show();  
  44. var task = options.anotherOption;  
  45. AppDemo.taskDetail = new AppDemo.views.TaskDetail();  
  46. AppDemo.taskDetail.setTask(task);  
  47. AppDemo.viewPort.setActiveItem(AppDemo.taskDetail,'slide');  
  48. Ext.getCmp('dockedItem').setTitle('Task Detail');  
  49. }  
  50. }); 

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

HTML5越来越强大啦……

伴随着HTML5的发展在若干年后手机上也会逐渐走向BS路线的。

小结:解析Sencha Touch离线存储功能的内容介绍完了,希望通过本文的学习能对你有所帮助!

责任编辑:zhaolei 来源: 互联网
相关推荐

2011-09-05 14:09:06

Sencha Touc函数

2011-09-02 15:12:29

PhoneGapSencha Touc

2011-09-02 15:18:49

Sencha Touc

2011-07-26 09:41:50

Sencha Touc特性HTML 5

2010-11-22 10:31:17

Sencha touc

2011-07-25 15:55:21

Sencha ToucHtml 5

2011-09-05 10:20:21

Sencha ToucAPP

2011-07-26 09:46:53

Sencha Touc

2011-07-25 16:21:22

Sencha touc

2011-09-02 16:21:08

Sencha Touc自动生成工具

2011-11-28 13:42:55

Sencha Touc组件选择器

2011-07-25 16:41:16

Sencha Touc

2011-09-05 13:53:08

Sencha Touc列表

2011-09-05 11:23:26

EclipseSencha Touc框架

2011-09-05 12:49:59

Sencha Touc事件

2012-03-08 22:31:28

Sencha Touc

2011-09-02 15:28:10

Sencha Touc浏览器

2011-09-05 10:27:02

Sencha Touc手机应用Android

2011-10-26 10:21:40

Sencha Touc组件

2011-09-02 16:42:51

Sencha ToucWeb应用
点赞
收藏

51CTO技术栈公众号