摘要：
列表组件要求两个前提条件被定义:用来进行数据存储的存储器和itemTpl 负责来显示数据.。要求列表来显示针对每条新闻的标题和日期，因此我们把我们在所定义的新闻模型的属性名称放在花括号中括起来。.下面让我们对列表的类型稍做风格的修饰，打开res/css/style.css并且添加下面的内容:.x-list-item-body { font-size: 0.8em; color: #0b3e7b; font-weight: bold;}.x-list-item-body .date { color: #666; font-weight: normal;}这里就是新闻... 阅读全文
posted @ 2012-05-08 14:58
范永强
阅读(115)
评论(0)
推荐(0)
摘要：
列表组件要求两个前提条件被定义:用来进行数据存储的存储器和itemTpl 负责来显示数据.。要求列表来显示针对每条新闻的标题和日期，因此我们把我们在所定义的新闻模型的属性名称放在花括号中括起来。.下面让我们对列表的类型稍做风格的修饰，打开res/css/style.css并且添加下面的内容:.x-l... 阅读全文
posted @ 2012-05-08 14:58
范永强
阅读(96)
评论(0)
推荐(0)
摘要：
建立一个新的控制器以处理新闻(NewsController.js):Ext.regController('News', { // index action index: function(options) { if ( ! this.indexView) { this.indexView = this.render({ xtype: 'NewsIndex', }); } var backBtn = this.application.view... 阅读全文
posted @ 2012-05-08 14:57
范永强
阅读(118)
评论(0)
推荐(0)
摘要：
建立一个新的控制器以处理新闻(NewsController.js):Ext.regController('News', { // index action index: function(options) { if ( ! this.indexView) ... 阅读全文
posted @ 2012-05-08 14:57
范永强
阅读(115)
评论(0)
推荐(0)
摘要：
现在，让我们在app/data/ 目录下建立news.json 文件，并且从Sencha Touch Press添加一些新闻消息:[ { "title": "Beyond jQuery: JavaScript Tools For The HTML5 Generation", "date": "November 09, 2011", "content": "One of the stated goals of HTML5, at least for some groups, is to 阅读全文
posted @ 2012-05-08 14:56
范永强
阅读(127)
评论(0)
推荐(0)
摘要：
现在，让我们在app/data/ 目录下建立news.json 文件，并且从Sencha Touch Press添加一些新闻消息:[ { "title": "Beyond jQuery: JavaScript Tools For The HTML5 Generation", ... 阅读全文
posted @ 2012-05-08 14:56
范永强
阅读(107)
评论(0)
推荐(0)
摘要：
创建存储器Store“存储类包含了一个客户端的模型对象的缓存，存储器通过代理加载数据，并且提供了针对其所包含模型实例数据的排序、过滤、查询模型实例“ (摘自Sencha Touch 文档)针对新闻item存储器模型将在app/stores/目录下创建，并且放置在NewsItemsStore.js 的这个文件中，文件包含下面的内容：Ext.regStore('NewsItems', { model: 'NewsItem', proxy: { type: 'ajax', url : 'app/data/news.json', }, a 阅读全文
posted @ 2012-05-08 14:28
范永强
阅读(154)
评论(0)
推荐(0)
摘要：
创建存储器Store“存储类包含了一个客户端的模型对象的缓存，存储器通过代理加载数据，并且提供了针对其所包含模型实例数据的排序、过滤、查询模型实例“ (摘自Sencha Touch 文档)针对新闻item存储器模型将在app/stores/目录下创建，并且放置在NewsItemsStore.js 的... 阅读全文
posted @ 2012-05-08 14:28
范永强
阅读(134)
评论(0)
推荐(0)
摘要：
在从零开始学习sencha touch MVC应用系列的最后一部分内容中，将在应用中添加一些数据来继续我们前面所讲的部分开发程序。在开始之前，请大家注意为了使这篇文章的所有例子都能运行，务必要将应用放在web环境中运行，因为应用中采用了AJAX技术，需要访问数据。下面开始为我们的应用添加一些消息在向应用添加消息之前，我们必须首先定义我们实际的一个消息条目所具有的属性，我们将通过创建一个模型来实现。建立模型“一个模型代表着应用所管理的对象，例如：我们可以定义一个关于用户、产品、汽车，等等诸如此类的现实世界对象的模型，这些都是我们想在系统中模型化的对象” (摘自Sencha Touch 官方文档) 阅读全文
posted @ 2012-05-08 14:07
范永强
阅读(137)
评论(0)
推荐(0)
摘要：
在从零开始学习sencha touch MVC应用系列的最后一部分内容中，将在应用中添加一些数据来继续我们前面所讲的部分开发程序。在开始之前，请大家注意为了使这篇文章的所有例子都能运行，务必要将应用放在web环境中运行，因为应用中采用了AJAX技术，需要访问数据。下面开始为我们的应用添加一些消息在向... 阅读全文
posted @ 2012-05-08 14:07
范永强
阅读(102)
评论(0)
推荐(0)
摘要：
我们已经给search-panel设置了cls属性：“一个可以添加到这个组件元素中的供选择的附加CSS类（默认为“”），主要可用于对组件的定制风格或者其组件元素的CSS规范化等”（引自SenchaTouch的相关文档），我们将使用这些类来达到视图的半透明化处理的目的。Search View将镶嵌在其他视图的顶部，并且不是以子视图窗口的方式显示，所以我们需要设置全屏属性，以强制组件尽可能的占用所有的可用空间。因为我们想让我们的搜索视图有滑动功能，我们需要设置浮动floating属性为true，否则视图将显示没有滑动动画功能，下面就是sencha Touch文档关于此问题的描述：“以浮动属性来创建 阅读全文
posted @ 2012-05-08 14:05
范永强
阅读(103)
评论(0)
推荐(0)
摘要：
我们已经给search-panel设置了cls属性：“一个可以添加到这个组件元素中的供选择的附加CSS类（默认为“”），主要可用于对组件的定制风格或者其组件元素的CSS规范化等”（引自SenchaTouch的相关文档），我们将使用这些类来达到视图的半透明化处理的目的。Search View将镶嵌在其... 阅读全文
posted @ 2012-05-08 14:05
范永强
阅读(123)
评论(0)
推荐(0)
摘要：
我们已经为搜索按钮添加了两个新的属性：iconCls 和 iconMask。iconCls，是一个用来作为按钮图标进行设置css类背景图片的类（引自sencha touch文档），通过给search按钮设置属性值使按钮有一个放大镜的背景图像，为使这个特性能正常运转，我们也需要设置iconMask属性为true。为Action设置了UI属性，可以使搜索按钮具有不风格。下面就是按钮显示：现在我们必须为search按钮设置处理器的功能，因为这个按钮将总是做同样的事情，我们可以在应用中的分发功能中设置其处理器的功能如下：launch: (){ this.viewport = new A... 阅读全文
posted @ 2012-05-08 14:02
范永强
阅读(144)
评论(0)
推荐(0)
摘要：
我们已经为搜索按钮添加了两个新的属性：iconCls 和 iconMask。iconCls，是一个用来作为按钮图标进行设置css类背景图片的类（引自sencha touch文档），通过给search按钮设置属性值使按钮有一个放大镜的背景图像，为使这个特性能正常运转，我们也需要设置iconMask属性... 阅读全文
posted @ 2012-05-08 14:02
范永强
阅读(151)
评论(0)
推荐(0)
摘要：
隐藏和显示工具条的回退按钮工具条的回退按钮只有在其需要的时候才显示，因此在index view视图中应当是隐藏的。在上面的index action中：this.application.viewport.setActiveItem(this.indexView, options.animation);添加：var backBtn = this.application.viewport.query('#backBtn')[0];backBtn.hide();在about action仅有如下代码：var backBtn = this.application.viewport.que 阅读全文
posted @ 2012-05-08 13:55
范永强
阅读(134)
评论(0)
推荐(0)
摘要：
隐藏和显示工具条的回退按钮工具条的回退按钮只有在其需要的时候才显示，因此在index view视图中应当是隐藏的。在上面的index action中：this.application.viewport.setActiveItem(this.indexView, options.animation);... 阅读全文
posted @ 2012-05-08 13:55
范永强
阅读(110)
评论(0)
推荐(0)
摘要：
现在我们来修改传递给分发功能的对象如下：Ext.dispatch({ controller: 'Home', action: 'index', historyUrl: 'Home/index', // animation: { type: 'slide', reverse: true, },});我们已经为指定动画属性的对象添加动画的客户属性，这个对象将从index action传递到setActiveItem功能，我们可以添加任何多的我们所希望添加的客户属性。我们下一步将看到我们是如何通过分发功能来实现对客户属性的访问的。下面我 阅读全文
posted @ 2012-05-08 13:53
范永强
阅读(100)
评论(0)
推荐(0)
摘要：
现在我们来修改传递给分发功能的对象如下：Ext.dispatch({ controller: 'Home', action: 'index', historyUrl: 'Home/index', // animation: { type: 'slide',... 阅读全文
posted @ 2012-05-08 13:53
范永强
阅读(115)
评论(0)
推荐(0)
摘要：
查询功能执行Ext.ComponentQuery.query，并且返回一个组件队列，因此，有且仅有一个组件条目化ID为BackBtn，返回阵列的第一项就是工具条按钮。如果需要查找更多的关于组件查询资料，你可以到这里（ here ）来阅读和查zho，看看Sencha Touch文档是如何来解释的。 既然我们已经得到了按钮的实例，我们就可以附加一个处理器，当按钮被触按/点击时来触发。我们实现这个通过传递一个功能到setHandler按钮的方法，在这个功能中，我们用Ext.redirect回到index action通过传递其路由。Ext.redirect是Ext.Dispatcher.redire 阅读全文
posted @ 2012-05-08 13:52
范永强
阅读(126)
评论(0)
推荐(0)
摘要：
查询功能执行Ext.ComponentQuery.query，并且返回一个组件队列，因此，有且仅有一个组件条目化ID为BackBtn，返回阵列的第一项就是工具条按钮。如果需要查找更多的关于组件查询资料，你可以到这里（ here ）来阅读和查zho，看看Sencha Touch文档是如何来解释的。 既... 阅读全文
posted @ 2012-05-08 13:52
范永强
阅读(129)
评论(0)
推荐(0)
浙公网安备 33010602011771号