中文教程

Sencha Touch 2学习笔记(一)---环境搭建和开发工具配置

最近正在了解html5的相关知识。知道了一个html5的框架-sencha touch 2。它的前身是ExtJs(js重量级框架,封装了一些ui控件)。sencha touch2是专门为手机开发的一套框架。可以适用于多个手机操作系统,其实就是兼容手机上的浏览器。
想更多的了解sencha touch2可以参照http://baike.baidu.com/view/3800552.htmhttp://extjs.org.cn/。如果英文好的话可以去他的官网。

ExtJS 4 MVC开发应用-实现按需加载、支持松藕合概念

xtJS4.1稳定版本出来了,终于忍不住,想要尝试一下小刀。初试了一下,确实给我们带来一些欣喜的新特性。其中重点之一就是MVC架构模式,组织代码真的觉得舒服,但也有一些别扭的,以前的好多方法都没有了,好多配置项也变了;以前很轻易的就能应用自己定义的模板,自己定义的格式化数据,可我怎么的,这两项都不能成功使用。

其实MVC、外部导入JS这些功能,dojo很早就提出来了,只是dojo的很多便于开发的功能没有ExtJS强,所以dojo沉下去了。

管理MVC依赖项

前言:

如果你第一次看Sencha Touch MVC应用程序的例子,很可能会被那一个个文件夹和一堆堆js文件搞得头昏脑胀,它们之间到底有什么关系?互相之间如何协作?这就是你在下手写代码之前必须搞清楚的第一件事了,本专题将为你解决这个困惑。

优化基于ExtJS 4.1的应用

虽然Sencha在Ext JS 4.1提高了性能,但基于Ext JS的应用性能优化仍然是奋斗目标。要优化应用性能,通常需要根据Ext JS的增强优势对修改代码。

本文将介绍如何实现优化,还将介绍一个用于Ext JS 4.1的新的性能测量工具——页面分析器。其主要功能是改善应用的性能。通过它,就可以定出测量指标兵测量它,从而找出代码中的瓶颈,兵采取正确的步骤消除瓶颈。页面分析可以做到这一点。最后,还将介绍Grid的优化,并介绍另一个新的用于评估Grid性能的Ext JS工具——Infinite Grid Tuner。

Using Models(使用数据模型)

前言:
数据模型[Model]的主要职责是描述存储和管理应用程序的数据,堪称MVC应用程序的肌肉和组织,缺少了Model的应用程序只能是一具没多大实用价值的空壳。事实上,几乎当前所有的互联网应用程序都是以数据的传递和交互为主要目的。
这篇文章的英文原址是http://docs.sencha.com/touch/2-0/#!/guide/models
原文标题是:Using Models(使用数据模型)。在官方文档目录中,它事实上的地位是MVC概述之后开篇三板斧之一,鉴于Sencha Touch MVC的特点,这三板斧的介绍顺序是倒过来的,先C控制器再V视图最后才是M数据模型,但是其重要性却不分先后。

如何创建一个Sencha Touch 2应用(第一部分)

在此系列中,我们将创建一个Sencha Touch 2版本的记事本应用,用来记录用户的笔记并存储在该运行设备上。在这个过程中,我们将深入一下几个区域:

  • 建立一个Sencha Touch 应用的区块
  • 如何实现一个应用多视图的导航栏
  • 如何使用Sencha Touch表单元素编辑数据
  • 如何利用列表视图呈现数据
  • 如何使用HTML5本地存储保存数据


在线phonegap打包Sencha Touch 2客户端应用

1、下载基于Sencha Touch 2移动站点开源项目的一个压缩包. 移动Web开发社区移动站点(SenchaTouch2版).zip

2、从电脑中选择上传已经下载的“基于Sencha Touch 2 移动站点开源项目”ZIP包 https://build.phonegap.com/apps#add-application,如图:


Ext Designer 1.2 正式版 下载

Ext Designer是一个桌面应用程序,是一个可以让你通过轻松的拖拽就完成Ext程序的创建.

下载地址:
http://www.sencha.com/products/designer/download/

请将反馈信息发送至:feedback@sencha.com.

Sencha Touch自动生成工具

在Sencha Touch中有一个鲜为人知的工具Sencha Command,位于sencha-touch-1.1.0/jsbuilder目录中,名为sencha.sh。相关资料表明该工具是用来自动化生成Sencha Touch项目目录结构,并包含一个代码生成器。使用了一下发现其明显处于试验阶段,因为代码中存在非常多的错误。通过sencha.sh生成的代码无法正常运行。不过不用担心,我们可以使用后面介绍的sencha-command来完成这些操作。下面简单的介绍sencha.sh的几个用法:

Sencha Touch 快速入门2.0 - 第一章 开发Sencha Touch App

Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理,全部基于最新的HTML5和CSS3的 WEB标准,全面兼容Android和Apple iOS设备。

下面是Sencha官方给出的几点特性

1.基于最新的WEB标准 – HTML5,CSS3,JavaScript。整个库在压缩和gzip后大约80KB,通过禁用一些组件还会使它更小。

2.支持世界上最好的设备。Beta版兼容Android和iOS,Android上的开发人员还可以使用一些专为Android定制的主题。

3.增强的触摸事件。在touchstart、touchend等标准事件基础上,增加了一组自定义事件数据集成,如tap、swipe、pinch、rotate等。

4.数据集成。提供了强大的数据包,通过Ajax、JSONp、YQL等方式绑定到组件模板,写入本地离线存储。

移动开发框架Sencha Touch之:iPad开发

在上一个关于sencha touch的教程《移动跨平台开发框架Sencha Touch实战》中,我们已对如何使用Sencha touch进行开发有了初步的认识。在本系列教程中,将学习如何使用Sencha Touch,开发一个适合在ipad上运行的网页应用,并详细讲解其中的技巧。本文的阅读对象为对Sencha Touch有一定基础的读者,如果读者不熟悉相关内容,请先查看上一篇教程。

移动跨平台开发框架Sencha Touch实战

目前,智能机的应用开发如火如荼,比如Android,苹果ios开发的应用已越来越多。开发者在开发这些基于不同操作平台上的无线应用时,都面临要熟悉所用平台的技术知识的挑战。因此,目前有不少基于HTML5标准的跨移动开发框架出现,开发者只需要掌握HTML5,CSS及Javascript及相关框架的开发技巧就可以了。

Sencha Touch 自定义List的两种实现方案

sencha touch的list里嵌入自己想要的控件,有多种选择方案。

其中一种是直接在tpl上加上html标签(如<button> <input>)创建html控件。效果如下:

蛋疼了吧。。。风格不统一,而且要给按钮加事件也显得比较别扭。这个方案,当然还是有它的好处的,这是所有方案中效率最高的一个。

sencha touch 高性能 list最简单高效的实现方案

sencha touch 的list,性能非常的低,官方论坛有人说超过200个项就已经是超标了!但事实上超过40个项就非常卡了,尤其是每个项里还有图图片的时候,在iphone中可能效果不错,但到了android,你可能会摔手机.
卡的原因其实是元素太多,必需限制显示的数据,但又要解决上滚和下滚显示相应的项,有人会想到用分页,其实分页相当的麻烦,下面就说一个鄙人奋战了一天摸索出来的方法,仅仅三步,几行代码,你看了也会会心一笑.

在应用中使用Ext Loader

ExtJS 4.0是一个使用新的依赖系统的类加载系统。这两个强大的新功能允许你创建大量允许浏览器按需下载脚本代码的应用。

今天,我们将通过建立一个小的使用新的类加载系统的应用程序来熟悉一下依赖管理系统。同时,我们将讨论Ext加载系统的各种配置项。

在开始之前,我们先来看看将要实现的结果。这样做,可使我们确定需要扩展那些类。


ExtJS 4应用架构设计

应用的可扩展性、可维护性和灵活性取决于应用架构的质量。不幸的是,这往往被视为马后炮。概念设计和原型变成了大规模的应用,许多应用的基础基本就是示例代码的复制与粘贴,这很诱人,因为这可以让你在项目在开始阶段有一个快速的进度。 然而,节省下来的时间相对于项目后期的维护、扩展甚至重构应用的时间来说,算不得什么。比较好的的方式是写一个可靠的架构,在实施前编写好遵循的约定和定义应用的视图、模型、存储和控制器等。在这篇文章,我们将会看到一个受欢迎的应用并讨论如何构建用户接口,从而创建可靠的架构

新的ExtJS发布4.02版和3.4版,提高性能并支持IE9

今天,我们的旗舰产品,Javascript框架ExtJS,同时发布了3.4和4.0.2两个版本,其中,3.4版本现在已经支持IE 9,而4.0.2版则进一步提供了性能和修复了错误,以及增加了一些功能。

Download Ext JS 4.0.2 View Examples View Release Notes

Download Ext JS 3.4.0 View Examples View Release Notes
ExtJS 4.0.2——灰色主题、性能调整、超过200个功能增强和错误修复 ExtJS 4.0.2包括3个主要的议题:性能优化、错误修复和灰色主题。流行的灰色主题已经从ExtJS3.x中回归了,在SDK和主题查看器的示例中已经使用了该主题,该主题已经打磨成4.0.2的主题,已经可以在所有组件上工作了。

是什么让你的ExtJS应用程序运行缓慢?

本文说的“缓慢”,是只运行时 的缓慢,而不是只加载资源的时间。

在过去的一年半以来,我一直与Robert Bosch在Bosch软件创新公司工作,在那里我们的前端技术堆栈非常依赖ExtJS。我有机会开发Visual Rules Web Modeler机器协助开发其它几个基于ExtJS的应用,因此,我积累了不少与ExtJS应用常见的性能问题有关的经验。

在这篇文章中,我将与你们分享导致ExtJS应用运行缓慢的瓶颈问题,并指出ExtJS开发者最容易犯的错误。

本文提及的ExtJS是指版本3.3.x及以下版本的ExtJS。

使用sencha touch开发新浪微博iphone界面

相信不少sencha touch的粉丝们都为Javascript能开发出手机Web App应用而感到兴奋。虽然Sencha Touch提供相当多的原生UI组件,但是利用原生UI开发出来的Web App的UI未必能完全满足手机上的UI设计。

本文将以iphone版本的新浪微博的“更多”界面,介绍如何利用Sencha Touch设计“更多”的界面。

本次示例将以iphone界面作为参考,使用Sencha Touch开发设计模仿iphone界面。

首先,将以iphone下述的界面目标作为参考:

Ext 4概述

Ext 4有志诚成为Web程序其革命性的开发平台。框架中的每一个首要的组件几乎都作了改善,而且属于相当大幅度的改善。对于Ext3来说——4.0许多组件以及子系统都是表现得焕然一新!本指南会向您提供有关Ext3到Ext4期间变化所呈现的一方面。