st实现收藏功能一个是通过调用接口,另一个是通过localstorage进行本地数据的保存和存储获取。如果是本地进行存储并且要实现收藏按钮随时更新状态,并且能够根据时候收藏进行变化的话,就需要每次展现页面数据的时候查看当前数据是否在localstorage里面,如果是的话,就添加一个收藏样式的图标,如果不是的话,则添加一个还没有收藏样式的图标。比如在我这里,每次要去加载页面的时候都要去看下localstorage的情况:
var isLiked = favourites.find('id', likecoureseId);
if(isLiked === -1) {
var btnCol= Ext.ComponentQuery.query('button[text = "收藏"]')[0];
btnCol.setIconCls('like_icon');
}else {
var btnCol= Ext.ComponentQuery.query('button[text = "收藏"]')[0];
btnCol.setIconCls('after_like_icon');
}
通过这种近似于‘轮询’的方式可以实现localstorage的收藏按钮的同步变化;
要实现点击收藏的功能,需要的函数一个是add,一个是remove,其实在localstorage里面保存的到底还是一个store而已,只不过你将这个store的存储方式定义为了‘localstorage’而已。那么在执行收藏操作的时候直接将当前的数据塞到对应的store内即可。代码如下:
likeAct: {
tap: function(btn) {
var me = this;
var likecoureseId = PiNewsRecord.id;
var favourites = Ext.data.StoreManager.lookup('LikeNews_store');
var isLiked = favourites.find('id', likecoureseId);
if(isLiked === -1) {
favourites.add(PiNewsRecord);
util.showMessage('收藏成功', true);
//Ext.Msg.alert('收藏成功');
var likeBtn = document.getElementsByClassName("item_button_style")[1];
btn.setIconCls('after_like_icon');
}else {
favourites.remove(favourites.getAt(isLiked));
util.showMessage('取消收藏', true);
btn.setIconCls('like_icon');
}
favourites.sync();
}
},
而对于在线收藏的原因应该也差不多,只不过相对于localstorage轮询式的查询方式,在线收藏要做的只是判断一下调用收藏接口时所返回的状态值而已。
分享到:
相关推荐
web 应用的 JavaScript 框架,它基于 HTML5 和 CSS3 的 web 标准,全面兼容 Android 和 Apple iOS,通过 Sencha Touch 框架用户可以创建非常像移动设备本地应用的 web 应用,它提供了丰富的华丽的控件和强大的功能,...
[Manning Publications] Sencha Touch 实战 英文版 [Manning Publications] Sencha Touch in Action E Book ☆ 出版信息:☆ [作者信息] Jesus Garcia Anthony De Moss Mitchell Simoens [出版机构] Manning ...
sencha touch 折叠list
Sencha Touch开发的项目《般若人生》源码
sencha touch 应用案例 sencha touch 案例 一个完整的sencha touch 应用案例 移动WEB社区开发的日志案例 非常不错!
[Packt Publishing] Sencha Touch 2 移动应用开发教程 (英文版) [Packt Publishing] Creating Mobile Apps with Sencha Touch 2 (E-Book) ☆ 出版信息:☆ [作者信息] John Earl Clark , Bryan P. Johnson [出版...
实现sencha touch 三种图标的使用 1、使用内置图标 2、使用自定义的字体图标 3、使用自定义的图片 经过验证,绝对可用
适合Sencha Touch刚入门者学习.项目下面的Index才是显示的页面.记得发布,不发布的话是显示不出来的
MAC OS 下sencha touch +cordova 开发环境配置。可以将H5 hybird 应用打包成IOS 应用。
sencha touch中文翻译文档,包含sencha touch入门基础和一些控件的使用说明
sencha touch 2.4.0最新版 原版包下载
sencha touch 是一个移动平台UI开发框架,可以实现各种绚丽的页面效果
sencha touch list demo
sencha touch 2 实现的贪吃蛇 希望对大家有所帮助
sencha touch cookbook 英文高清文字版 !
这是我做的一个sencha touch 的项目,测试并能运行,希望对大家有帮助
sencha touch grid
Sencha Touch 2入门教程之MVC 讲解如何使用 Sencha Touch 2 mvc模式来开发一个登录界面
Sencha Touch是专门用于移动...使用Sencha Touch,开发者可以构建在iPhone、Android和BlackBerry touch等设备上运行的移动web应用,其效果看起来如同本地应用。目前Sencha Touch已经成为构建移动HTML5应用的领先框架。
sencha touch sdk工具