没有合适的资源?快使用搜索试试~ 我知道了~
首页开发sencha-touch2记事本应用教程
资源详情
资源评论
资源推荐
如何用 Sencha 2 开发一款记事本软件
豆连军 doulianjun@gmail.com
微博:
http://www.weibo.com/bayuehu@八月虎 baidu
翻译自:http://miamicoder.com/2012/how‐to‐create‐a‐sencha‐touch‐2‐app‐part‐1/源码有改动
部分译稿取自:http://www.oschina.net/question/89964_38791 彭博
目录
如何用 Sencha 2 开发一款记事本软件........................................................................................1
1 Part1.........................................................................................................................................2
1.1 记事本软件的功能列表...............................................................................................2
1.2 软件界面.......................................................................................................................3
1.3 一个 SenchaTouch 应用在目录与文件上如何组织..................................................4
1.4 创建一个 SenchaTouch 应用实例..............................................................................5
1.5 在 SenchaTouch 中继承类..........................................................................................6
1.6 在 SenchTouch 指定应用的依赖................................................................................8
1.7 创建 SenchaTouch 控制器.........................................................................................9
1.8 如何处理 SenchaTouch
控制器中的视图事件........................................................10
1.9 总结.............................................................................................................................12
2 Part2.......................................................................................................................................13
2.1 创建便签列表视图(NotesListView)....................................................................19
2.2 创建便签数据模型 DataModel。.............................................................................23
2.3 建立数据模型的有效验证机制.................................................................................24
2.4 创建数据存储器.........................................................................................................24
2.5 总结.............................................................................................................................25
3 Part3.......................................................................................................................................26
3.1 创建 Form 面板..........................................................................................................26
3.2 增加顶端、底端工具条.............................................................................................
28
3.3 软件中如何更换视图.................................................................................................31
3.4 对 datamodel 进行有效性验证................................................................................33
4 Part4.......................................................................................................................................37
4.1 Disclosure(详情)事件............................................................................................37
4.2 将记录从 datastore 中移除。..................................................................................38
4.3 List 数据分组..............................................................................................................39
1 Part1
本节课我们学习开发一个记事本软件。该软件的功能包括:记事和存储。相应的
开发工作包括如下几部分:
• 子模块划分
• 如何用多视图来实现阅读浏览功能
• 如何使用 Form 元素来编辑数据
• 如何用 List View 来渲染信息
• 如何利用 HTML5 进行本地存储。
首先,我们将定义软件的功能要求、界面和使用用法,并创建主窗口。
1.1 记事本软件的功能列表
• 创建便签
• 编辑便签内容
• 删除便签
• 展示当前保存的便签列表
• 在跨浏览器 session 时,保持便签
1.2 软件界面
该记事本应用的主界面将以列表形式显示已有记录。我们将次视图命名为
NotesListContainer。此处是它的模型,描述了怎样利用 Sencha Touch 组件来
构建。
正如你看到的,NoteListContainer 视图是一个 Ext.Container 组件,它集成了
一个工具栏组件和一个列表组件。我们将把 Ext.List 组件作为一个独立的视图:
NotesList 视图。
第二屏 NoteEditor 视图,用户可以在此创建、编辑和删除记事。该视图就像如
下模型:
该 NoteEditor 视图是一个 Ext.form.Panel 组件,它包含了一组工具栏和表单元
素以编辑记录的属性。
同时,我们也需要一种在不同屏幕中导航的机制。由于每个 Sencha Touch 应用
已启动变获取了一个 Viewport,我们可以利用它来呈现 NotesListContainer 和
NoteEditor 视图,同时也可以利用它管理两视图间的导航:
该 Viewport 很适用于当前任务,它继承自 Container 类,默认全屏卡片布局,
这正是我们所需要的。
1.3 一个 SenchaTouch 应用在目录与文件上如何组织
我们已经定义好了应用的特性以及用户界面,接下来,我们将开始编写源代码,
我们将如下组织源代码文件目录:
将文件放在 NotesApp 目录下,一并包含着该应用的启动代码(app.js 中)。
我们同样需要一个 app 目录,其下放置 controller,model,profile,store,view
目录。程序中用的控制器、模型等将分别放置在对应的目录下。
index.html 文件将启动该应用,此文件中,将包含 Sench Touch 框架。
<!‐‐<!DOCTYPEhtml>
<html>
<head>‐‐><!‐‐Removecomments!‐‐>
MyNotes
<scripttype="text/javascript"src="../Lib/ST2/sencha‐touch‐debug.js"></script><script
type="text/javascript"src="app.js"></script>
<!‐‐</head>
<body>
</body>
</html>‐‐><!‐‐Removecomments!‐‐>
注意,我们将该框架文件防止在 Lib/ST2 文件夹下
1.4 创建一个 SenchaTouch 应用实例
第一步我们将在 app.js 中创建一个 Sench Touch 应用类的实例,如下定义一个
应用实例:
Ext.application({
name:'Demo',
launch:function(){
console.log("Applaunch");
剩余41页未读,继续阅读
wxfx8
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论9