jQuery MiniUI,Ajax Web开发

Sencha Touch|Sencha Touch中文|Sencha Touch中文教程

List在MVC下显示store数据的问题

如果采用MVC模式定义了Store和对应的model,分别为:

Ext.define('hcx.store.ContactStore',{ 
  extend : 'Ext.data.Store',
  xtype  : 'hStore',
  requires : ['hcx.model.Contact'],

  config: {
    model : 'hcx.model.Contact',
    sorters : 'lastName',
    grouper : {
      groupFn : function(record){
          return record.get('lastName')[0];
          }
        },
    data : [
       { firstName: 'Tommy',   lastName: 'Maintz'  },
       { firstName: 'Rob',     lastName: 'Dougan'  },
       { firstName: 'Ed',      lastName: 'Spencer' },
       { firstName: 'Jamie',   lastName: 'Avins'   }
              ]
}});

Sencha Touch的Form使用

很多App都需要使用forms来获取用户的输入。ST的forms是封装了html5的forms,并且添加了一下验证和提交数据功能。除此之外,还更容易将field以更好的表现形式布局出来。因为forms中已经默认对field进行了布局排列。

Form Panel 提供一组form fields 和很便利的方式去加载和保存数据。使用一个form panle 包含了一组你需要展示的fields,如下面的例子:

Sencha Touch命名规范

类名

类名只包含字母和数字,但在多数情况下不鼓励使用数字,除非是技术术语,不要使用下划线,连字符,和其他非数字字母的字符,例如:

  • MyCompany.useful_util.Debug_Toolbar is discouraged
  • MyCompany.util.Base64 is acceptable

类名应当分组成包,适当时,使用.进行命名空间划分,至少在类名中应该有一个唯一的命令空间。例如:

MyCompany.data.CoolProxy
MyCompany.Application

Sencha Touch Carousel 去除底栏

Sencha Touch Carousel 去除底栏

[code]
/*global Ext:false */
Ext.application({
launch: function () {
Ext.create('Ext.Carousel', {
defaults: {
styleHtmlContent: true
}, // defaults
indicator: false, //Carousel 去除底栏
fullscreen: true,
items: [
{
html: 'red',
style: 'background-color:#f00;'
}, {
html: 'orange',
style: 'background-color:#ffb600;'
}, {

Sencha架构解读

sencha是移动端的html5框架,可以用来制作跨平台的app应用。sencha内部利用mvc结构,使得整个框架在使用时能够保持代码的整洁,也易于测试和修改。

一个 sencha app是一个由model,controller,view,store,profile,再加上一些静态资源,例如:app的图标,加载页面图片等组成的集合
models:表明了app的类型,比如,电子商务型的app应该有 用户,产品,订单等模块
views:负责想用户展示数据,使用sencha 内部已有的组件
controllers:处理内部各部分之间联系,监听用户的点击、滑动并采取相应行动
store:负责加载数据,增强里内部组件的能力,如Lists和DataViews
Profile:能够在公用尽量多的代码的同时,很便利的优化app在平板和手机的UI

建立一个app通常要做的第一件事就是定义application,如下

Sencha Touch 2 快速入门

什么是Sencha Touch?

Sencha Touch使得你可以便捷地创造一个基于HTML5的手机应用,支持Android、iOS和黑莓等设备,并且在浏览器中创造原生APP般的体验。

你需要准备好

首先,你需要下载免费的Sencha Touch 2 SDK 和 SDK Tools (或者Sencha Cmd ) 。你还需要:
一个本地的web server
现代浏览器;推荐 Chrome 和 Safari (请不要用IE6!!)
如果你是在Windows上使用IIS,请记得添加 application/x-json 这个MIME Type,否则Sencha Touch不能正常工作。你可以从这里知道应该如何做:
http://stackoverflow.com/a/1121114/273985(很抱歉我并不使用IIS,没有对这个链接中的方法进行测试)。

Sencha指出Facebook的HTML5慢的原因

还记得〈FB 执行长祖克柏坦承:採用 HTML5 是脸书成立以来最大的错误〉这个消息吗?

Facebook 创办人兼执行长 Mark Zuckerberg 今年 9 月出席《TechCrunch》Disrupt 大会时,曾抱怨用 HTML5 写出的 Facebook App 又慢又不稳定,总是没办法达到他们想要的品质,因而推出原生版的 Facebook App。

在MyEclipse和Tomcat下配置Sencha Touch环境

首先要配置开发环境。这个很简单,只要到官方网站下载Sencha Touch压缩包即可http://www.sencha.com/products/touch/。
开发工具随便一个编辑器,记事本也可以的。
本人用的是MyEclipse+Tomcat,Sencha Touch用的是1.01版本(使用MyEclipse+Tomcat我为了以后例子可以跟后台交互)
其实可以直接浏览本地静态html文件的。

我的第一个基于SenchaTouch的WebApp

经过进一周的各种折腾,各种想放弃,各种纠结,最终还是顺利的完成了SenchaTouch的开发,回想起来感觉“甜甜的”,也充分体会到Sencha MVC开发模式的好处,以及SenchaTouch.js和Extjs的强大和牛逼,不得不佩服,在我看来这绝对是企业级开发非常强大和优雅的UI开发框架,不喜欢的就不要吐槽了。

这几天,天天看SenchaTouch的API,指导教程,论坛,不懂就查,几度崩溃,非常庆幸的是Sencha团队提供了非常完备的documents,一查就知道。开发经历还是有点纠结的,刚开始也是不习惯他的MVC开发,干脆所有js都写在一个页面里面,就这样乱乱的完成了,到最后花了一个晚上的时间将其转换成MVC架构的,才发现其架构的优雅,正是我所追求的,尤其是他对于控件的定位查找,方法绑定等,太帅了,这让我对Extjs4.0权限框架的开发充满了信心!!!

Sencha Touch 2 Sass自定义图标的使用方法

Sencha Touch 提供的默认图标有限,api上只有这么几个

但为了方便扩展,sencha touch早已经给我们准备了若干的图标文件和sass代码,方便后期的css自定义等。

图标文件在:\resources\themes\images\default\pictos 下面,如果不够用,你可以放置自己的png格式图片。

如何自定义自己的图标呢?

由于我们是window系统,必须先安装ruby环境,因为sass和compass工具依附于ruby。

Sencha Touch 2.1 正式版下载

Sencha Touch 2.1 正式版下载

Sencha Touch 2.1 正式版下载
包括:
所有源代码
构建
HTML API文档
示例

免费版:
下载(Download)

商业版:
下载(Download)

Sencha Touch 2.1 更新

啥更新了?

Sencha Touch 2.1 将是 Sencha 移动框架的下一新版本。2.1包括了下列关键更新:性能上的极大改进、正式支持图表、高级列表 List 控件,以及通过 Sencha Mobile Packager 的增强原生支持。


Sencha Touch 2.1 将会有何新特性

来自 Sencha Touch 的博客上的文章介绍了 Sencha Touch 的下一个版本 2.1 的主要改进内容。

Sencha Touch 2.1 是我们下一个 Sencha 移动框架的版本,该版本将会包含以下几项关键性更新:

1. 显著的性能提升

2. 图表支持

3. 高级的列表控件

4. 通过 Sencha Mobile Packager 增强原生支持