`
thierry.xing
  • 浏览: 665065 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
580fa9c1-4a0c-3f40-a55a-c9256ce73302
Sencha Touch中...
浏览量:0
社区版块
存档分类
最新评论

Sencha Touch中使用标准LocalStorage

 
阅读更多

虽然Sencha Touch本身有和Store关联的LocalStorageProxy,但是使用起来限制性较大,比如复杂的TreeStore就没法正常使用。

 

所以,我使用灵活性更好的Html5标准LocalStorage。

 

下面举例说明用法:

 

首先在App.js中声明全局LocalStorage变量:

 

 

Ext.application({
	name : 'MobileOA',

	platform : typeof WL === 'undefined' ? "" : WL.Client.getEnvironment(),

	// loads the views used by the app from the app/view folder
	views : [],

	// loads app/store/Demos.js, which contains the tree data for our main
	// navigation NestedList
	stores : [ 'Navs', 'Attachments', 'ToDos', 'CompanyDocuments', 'DeptDocuments', 'Depts', 'MoreItems' ],

	// of device detected
	profiles : [ 'Tablet', 'Phone' ],

	// 本地存储
	localStorage : window.localStorage
)}

 

 

 

然后自定义一个所有Controller的基类BaseController,在里面添加Set和Get方法,方便其它Controller调用存取持久化内容。

 

/**
 * @class MobileOA.controller.BaseController
 * @extends Ext.app.Controller
 */
Ext.define('MobileOA.controller.BaseController', {
	extend : 'Ext.app.Controller',

	/**
	 * 控制所有页面的创建显示
	 */
	showView : function(navigation, name) {
		console.log(name);
		var view = Ext.create("MobileOA.view." + name);
		navigation.push(view);
	},

	animateView : function(name, animate, direction) {
		console.log(name);
		var view = Ext.create("MobileOA.view." + name);
		Ext.Viewport.animateActiveItem(view, {
			type : animate,
			direction : direction
		});
	},

	/**
	 * NavigationView Pop View
	 */
	pop : function(navigation, count) {
		// var count = arguments[0] ? arguments[0] : 0;
		if (!count)
			count = 0;
		navigation.pop(count);
	},

	/**
	 * 保存本地存储
	 */
	storeSet : function(key, value) {
		this.getApplication().localStorage.setItem(key, value);
	},

	/**
	 * 获取本地存储
	 */
	storeGet : function(key) {
		return this.getApplication().localStorage.getItem(key);
	},
});

 

 

 

在需要使用LocalStorage的Controller中进行相关方法调用

 

/**
	 * 页面初始化
	 */
	onDeptContainerInit : function() {
		var app = this.getApplication();
		var me = this;
		var items = me.storeGet("deptLocal");
		var storeName = "Depts";
		// 如果LocalStorage存在之前保存的JSON格式对象,则从LocalStorage中获取
		if (items != null) {
			store = Ext.getStore(storeName).load();
			store.setData(JSON.parse(items));
			// 否则,从服务器端获取
		} else {
			var data = {
				adapter : "OADept",
				procedure : "getDepts",
				parameters : []
			};
			app.getAdapterProcess(storeName, null, data, true, function(items) {
				//将从服务器端获取的数据转化成String,并存储在LocalStorage中
				me.storeSet("deptLocal", JSON.stringify(items));
			});
		}

	},

 

 

 

1
0
分享到:
评论

相关推荐

    Sencha Touch2 MVC Demo (含源码/数据库)

    Sencha Touch 2 支持使用LocalStorage、WebSQL或IndexedDB等本地存储方案,以保存离线数据。在源码中,可能包含用于与数据库交互的模型和控制器代码。 总的来说,"Sencha Touch2 MVC Demo"是一个学习和实践移动应用...

    sencha touch camera MVC模式

    在“Sencha Touch Camera MVC模式”中,我们将探讨如何在Sencha Touch中集成相机功能,并使用MVC模式进行开发。 1. **MVC模式**: MVC模式是一种软件设计模式,用于分离应用程序的数据逻辑、用户界面和业务逻辑。...

    Sencha Touch 本地记事本 代码3

    在这个"Sencha Touch 本地记事本 代码3"案例中,我们将深入探讨如何使用Sencha Touch来开发一个简单的本地记事本应用。 首先,我们来看`index.html`文件,它是所有Web应用的入口点。在Sencha Touch应用中,`index....

    Hands-On Sencha Touch 2

    - **类系统**:理解Sencha Touch中的类继承机制及其在组件开发中的作用。 - **布局管理**:熟悉Sencha Touch提供的各种布局方式,如CardLayout、BorderLayout等,以实现灵活的界面设计。 3. **模型-视图-控制器...

    使用SenchaTouch开发跨平台移动Web应用.doc

    Sencha Touch 的功能和特性包括支持 HTML5 和 CSS3 标准,提供了丰富的界面组件和动画效果,同时也提供了基于 LocalStorage Proxy 的离线数据存储功能。该框架还提供了大量的 CSS3 样式表,用于创建健壮的样式层。...

    Sencha Touch 本地记事本 代码1

    学习这个案例,我们将了解到如何使用Sencha Touch的组件,如`Ext.List`(列表视图)和`Ext.Panel`(面板,常用于构建页面布局),以及如何在控制器中监听事件并响应。此外,还会涉及如何使用`Ext.data.Model`和`Ext....

    sencha-touch 移动开发

    在压缩包文件`sencha-touch-1.1.0`中,包含了Sencha Touch 1.1.0版本的源码和相关资源。这个版本可能较旧,但对于学习Sencha Touch 的基本概念和工作原理依然很有帮助。你可以通过阅读源码、查看示例和文档来深入...

    Sencha Touch 2 MVC Demo 本地Json访问数据

    总结来说,"Sencha Touch 2 MVC Demo 本地Json访问数据"这个示例旨在展示如何在Sencha Touch 2环境中,使用MVC模式和本地JSON数据构建移动应用。通过理解并实践这些知识点,开发者可以更好地理解和应用Sencha Touch ...

    官方sencha-touch最新版本2.0.0(附文档和实例)

    附带的文档是开发者的重要参考资料,它详细解释了框架的所有组件、类、方法和配置选项,帮助开发者深入理解和使用Sencha Touch。实例代码则可以让初学者快速上手,通过实际操作了解如何将理论知识转化为实际应用。 ...

    SenchaTouch2.4

    在Sencha Touch 2.4中,布局管理器能够智能地根据屏幕大小和方向自动调整组件的排列和尺寸,适应不同设备和屏幕分辨率。这包括诸如卡式布局、绝对布局、网格布局等多种布局模式。 5. **本地存储和远程数据同步**:...

    sencha touch 2.2

    它们共同构成了Sencha Touch的数据层,支持本地存储(LocalStorage或WebSQL)和远程数据源(如RESTful API)。 4. **控制器(Controller)**:控制器作为应用程序的“大脑”,负责监听事件、协调组件间交互和处理...

    个人电子书-《移动互联网技术开发内幕》

    - **Sencha Touch与HTML5 LocalStorage**:讨论了如何在Sencha Touch应用中集成HTML5的LocalStorage功能,以实现持久化的数据存储。 #### 三、Sencha Touch与其他技术的结合 - **PHP与Sencha Touch的数据交换**:...

    2013+Sencha.Touch.2:Up.and.Running.pdf 源代码,可运行

    本书《2013 Sencha Touch 2: Up and Running》深入浅出地介绍了如何使用Sencha Touch 2进行移动应用开发,而提供的源代码正是书中各个章节的实例,旨在帮助读者更好地理解和实践。 1. **Sencha Touch 2基础知识**:...

    ST2翻译资料

    在`Sencha Touch 2 使用数据模型.docx`中,你将学习如何定义模型类、配置字段、以及使用模型实例进行数据操作,如创建、读取、更新和删除(CRUD)。 2. **Sencha Touch 2 设备配置**: 这部分内容讲解了如何根据...

    电信设备-一种基于Sencha+Touch的移动办公应用的预加载优化方法.zip

    在Sencha Touch中,我们可以采用以下几种策略进行预加载优化: 1. **异步加载**:对于大型应用,可以将数据和组件按需分块加载,避免一次性加载所有内容导致的延迟。Sencha Touch提供了异步加载机制,可以根据用户...

    sencha-rest-signup-module:Sencha Touch 的用户注册模块。 单击 Snap-Signup 以避免用户“注册疲劳”。 基于 REST 的服务器调用

    这样做是为了确保组件在其他 Sencha Touch 项目中可以轻松插入。 触发应用程序范围的事件,以便可以在任何地方捕获它。 例如 signUpSuccess 事件在应用程序范围内被触发。 特征: 遵循“快速注册”(T) 方法进行...

    移动开发框架

    作为一个开源库,Sencha Touch压缩和最小化后的大小仅为120kb左右,通过禁用未使用的组件或样式,可以进一步减小体积。 **平台支持** Sencha Touch支持iOS和Android平台,并计划增加对BlackBerry 6的支持,包括...

    sencha-touch-offline-proxy:演示应用程序显示代理如何同时支持在线和离线

    Sencha Touch 离线代理 演示应用程序显示代理如何同时支持在线和离线。 基于 repo。 变更日志 将 Sencha Touch 升级到 2.4.1 版本 添加 LocalStorage 存储设施

    LBRApp:在 iphone 上使用 sencha 框架运行的电子阅读和抽认卡应用程序的原型

    在 Sencha Touch 中,可以使用组件库中的列表(lists)、卡片视图(card views)和表单(forms)等元素来实现这一功能。 编码方面,由于这是个原型,我们不应期待代码的整洁性。原型的主要目标是快速验证概念,而...

Global site tag (gtag.js) - Google Analytics