摘要：
服务端代理服务端代理，有传统的Ajax异步代理，支持跨域请求的JsonP代理(需要服务端支持)。其中Ajax代理和JsonP代理都需要配置url来指明服务器的API接口地址。Ajax代理(type: 'ajax')Ajax大家是最熟悉不过了，通过url对服务器的数据进行存取，其数据传输格式为xml或json，下面是一个使用Ajax代理的示例。Ext.define('User', { extend: 'Ext.data.Model', fields: ['id', 'name', 'email']}) 阅读全文
随笔分类 - sencha touch
Sencha Touch 2.0 威老的自定义组件：CardPanel
2011-12-23 15:33 by 威老, 3104 阅读, 收藏, 编辑
摘要：
这个自定义组件是用来帮助我们动态销毁暂时不用的视图的。我们把CardPanel作为主视图，用户进入另一个视图的时候，调用setActiveCard()来设置CardPanel的activeItem。这样当用户点击后退按钮时，这个CardPanel就会同时销毁视图并将其从dom结构中除掉。官方的优化指南文档说了，ST性能瓶颈在于内存，而不在cpu。因此为了提高性能我们可以专注于精简dom结构。把看不见的视图先销毁，这就是一个不错的点子。但也不是所有看不见的视图都要立即销毁，有些视图可能用户马上还会用到，这些可以先保存在栈里面。因此，前进的时候，需要保存现场。后退的时候，则可以销毁。对于想要提高性 阅读全文
Sencha Touch 数据层篇 Proxy(上)
2011-12-07 14:29 by 威老, 7925 阅读, 收藏, 编辑
摘要：
代理：Proxy与数据存取代理用于处理数据的存取操作，我们通过给store配置代理，来使得store能够访问服务端以及客户端的数据。换句话说，proxy指定了store的数据源。代理共分为两大类：客户端代理和服务端代理。客户端代理负责本机数据的存取，而服务端代理，则负责远程数据的存取。下面，从比较简单客户端代理开始讲解。客户端代理客户端代理又分为内存代理和web存储代理，内存代理很容易理解，就是负责存取内存中的数据。例如我们随手在代码中写出来的一个javascript对象，就可以用内存代理读取。而web存储代理，其实是对HTML5的Web Storage所作的封装。内存代理(type: 阅读全文
Sencha Touch 数据层篇 Store
2011-12-07 12:49 by 威老, 11390 阅读, 收藏, 编辑
摘要：
数据集storestore是数据的集合，我们称store中条数据为一条记录。store从代理(proxy)获取数据。它封装了数据的查询、筛选和排序等常用方法。然而，最重要的是，ST中的一些组件可以绑定store，这些组件会以我们设定好的格式去显示store的内容，这大概是Sencha Touch中最强大的功能了。当sotre内容发生改变时，我们能很方便地更新组件的显示，这使得我们的开发工作变得十分地轻松。创建一个store在这里我们先新建一个store，后面我们都会以这个store作为操作对象来讲解store的各种用法：Ext.regModel('Contact', { fie 阅读全文
Sencha Touch 数据层篇 Model
2011-12-07 10:10 by 威老, 6516 阅读, 收藏, 编辑
摘要：
模型 model一个最基本的模型声明其所代表的数据对象所具有的字段名称。复杂一点的，可以再加入一些字段类型的声明、字段的验证规则、字段的映射。定义模型定义一个模型非常简单：继承“Ext.data.Model”，然后给他指定一些字段就行了。最简单的模型甚至连字段类型都不需要声明，这时的每个字段都是一个简单的字符串：Ext.define('User', { extend: 'Ext.data.Model', fields: ['name', 'age', ' phone', 'alive']});也可以 阅读全文
Sencha Touch 提高篇 组件选择器
2011-11-26 15:07 by 威老, 9283 阅读, 收藏, 编辑
摘要：
好久没发新文章了。呵呵，今天先给大家放上一篇。写起来挺轻松的，但是排版就纠结了，写在word里的没办法直接复制过来。会缺失格式，得重新排版，那个叫累啊。。。大家有什么好的工具或者方法可以推荐下吗？ 在开发的过程中，经常会碰到需要调用刚才创建的组件的情况。一般情况下，可以用Ext.getCmp()方法达到这一目的。这个方法是Ext.ComponentManager的get方法的快捷方式，调用Ext... 阅读全文
Sencha Touch 2.0 有哪些新特征？ -- Sencha Touch 官方指南系列
2011-11-13 11:05 by 威老, 3094 阅读, 收藏, 编辑
摘要：
Sencha Touch 2.0 有哪些新特征？翻译：若天 来自：移动Web开发社区原文链接本指南在不断完善中，它不包括Sencha Touch 2.0(以下简称ST 2 )的所有性能。但它将成为ST 2的最终版本。欢迎来到Sencha Touch 2.0ST是第一个HTML5移动开发框架，ST 2.0是ST有史以来最大一次升级。我们最关注的是ST的性能，致力于让基于ST开发的APP能在更多的平台... 阅读全文
开始Sencha Touch 2之旅 -- Sencha Touch 官方指南系列
2011-10-14 14:42 by 威老, 8872 阅读, 收藏, 编辑
摘要：
开始Touch 2之旅Sencha Touch是什么?Sencha Touch (以下简称ST)能够帮助你快速地构造出基于HTML5的手机应用。通过ST构造出来的程序有着与原生应用一致的用户体验，目前已全面支持Android、IOS、黑莓这些主流平台。准备工作您不需要太多的准备。只需要：一个免费的Sencha Touch SDK。一个本机的web服务器。一个支持HTML5的浏览器(推荐使用Chro... 阅读全文
Sencha Touch 1.x 用scroller实现滚到底部加载更多
2011-09-27 16:43 by 威老, 5278 阅读, 收藏, 编辑
摘要：
需求：当list滚动到末尾的时候，自动加载更多的内容。闲言碎语：其实这个问题要解决非常简单。但首先，我相信，大家不是为了简单的copy那几行代码而来的。相信看了详细的解说，大家能够真正有所收获，能够举一反三。毕竟sencha touch的中文资料不多，很多问题，都是找不到现成的解决方案的，这就需要我们自己动手去解决啦。分析：要搞定这个问题，首先要知道跟滚动相关的一些东西。请大家打开api文档，跟我一起来吧！不清楚文档使用方法的请看Sencha Touch 快速入门2.0 第四章 Api文档看懂了吗？首先，让我们认识一下ST框架里的scroller对象。scroller对象scroller在se 阅读全文
Sencha Touch 1.x TabPanel的左侧TabBar
2011-09-13 14:19 by 威老, 2791 阅读, 收藏, 编辑
摘要：
先看看效果其实是会碰到问题滴sencha touch里，tabBar只有设在上面或者下面的时候，才能正常显示。如果设置到左侧的话，默认就会产生这样的结果：要解决这个问题，我的第一反应就是用css。但是那无疑增加了复杂度。（我确实也那么搞过，麻烦得要命）其实只要对sencha touch的布局熟一点，分析一下，很容易就能找到问题的关键。水平一排过来的Tab1,Tab2,Tab3按钮，这是什么？这不就是hbox布局吗！OK，也就是说要让它变成垂直的，只需要把hbox布局改为vbox布局即可。第一个措施因为Tab1,Tab2,Tab3是在TabBar里面的，所以我们把tabBar的layout改为v 阅读全文
Sencha Touch 1.x 为tabPanel添加一个更多按钮。
2011-09-13 13:07 by 威老, 5136 阅读, 收藏, 编辑
摘要：
我们要的效果这个示例由2各部分组成。一个TabPanel，一个overlay。出现的问题为了制作出“更多”按钮，大家首先想到的肯定是在TabPanel的tabBar里添加一个item就像这样tabBar:{ items : { text :'更多', handler : showOverlay }但是这会引发一个问题：用户点击了更多按钮时TabPanel会切换回第一个Tab。这显然不是我们想要的效果。这么一个令人纠结的小问题，处理起来，也是令人头皮发麻。今天重点就是给大家讲解一下，我解决这个问题的整个过程，希望能够给各位一些帮助。问题分析为什么会切回第一... 阅读全文
Sencha Touch 1.x 快速入门 第四章 Api文档看懂了吗？
2011-09-01 16:30 by 威老, 5092 阅读, 收藏, 编辑
摘要：
今天来扯一扯官方文档以及其他的一些东西。大部分问题，其实都是可以通过查阅文档来解决的。 因为文档是没办法直接用浏览器打开来看的，所以请大家先将sencha-touch-1.1.0下的docs文件夹部署到本机的IIS或者其他服务器上，以便查阅。怎么部署文档? Win7的话，比较简单，请看这篇文章windows7/win7 iis的安装与配置（图解教程） xp的话 iis 6.0 完整安装包 安装好IIS之后，把docs文件夹拷贝至C:\inetpub。新建一个站点，物理路径C:\inetpub\docs。指定一个端口。 完成之后，在地址栏输入http://ip地址:端口号，就能够正... 阅读全文
Sencha Touch 1.x 快速入门 第三章 布局(2) Card布局
2011-08-29 14:08 by 威老, 5793 阅读, 收藏, 编辑
摘要：
在这篇里面，我就尽量少说废话了，如果有什么不清楚的地方，请看前面的章节。Sencha Touch 快速入门2.0 第三章 布局（一）Box布局一、Fit布局Fit布局很有特点，它只允许自己的第一个item被显示出来，并且填充满自己。如果它的item多于一个，那难免是会出些意外的情况的。如果你发现你的容器内的控件有的没有全部被显示出来，那不妨看看它的layout是否为fit，试着将它强制设为vbox往往就能解决问题。下图是在一个layout为fit的Panel里放了三个button的结果：所以说：除非你想营造些令人匪夷所思的效果，请不要在fit布局的容器里面放超过一个的东西。二、Card布局Se 阅读全文
Sencha Touch 1.x快速入门 第三章 布局（1）Box布局
2011-08-23 16:06 by 威老, 8441 阅读, 收藏, 编辑
摘要：
SenchaTouch里的布局有五种ohboxovboxocardofitoauto[默认]实际上可以分为Box布局和Fit布局两种。Senchatouch里的布局应该理解为：该控件内部子项的排列方式。我们今天先来看看box布局Box布局 顾名思义，box布局就是一个个的box组成的。 hbox:水平排列、垂直居中、靠左置顶 vbox:竖直堆叠、水平居中、靠上置顶hbox：hboxExt.setup({ tabletStartupScreen: 'tablet_startup.png', phoneStartupScreen: 'phone_startup.png 阅读全文
Sencha Touch 1.x 快速入门 第二章 Chorme浏览器调试功能介绍
2011-08-23 10:30 by 威老, 5739 阅读, 收藏, 编辑
摘要：
大家好，今天再为大家奉献一篇入门教学，这次是关于浏览器调试的。无论你是在学习，还是做项目，熟练地掌握浏览器的调试功能，都将会有很大的帮助。调试能够帮助你快速地了解框架，处理bug，让你不论处理什么都能够更快速，更准确。在这篇文章里，我将详细地为大家介绍chrome浏览器中常用的调试功能，对于其他的浏览器，大家同样可以触类旁通。接下来->打开chrome->按F12。开始chorome调试之旅吧！一、JS调试选中Script标签之后，我们来到了JS调试界面。为大家讲解一下各个区域的作用。左上角有一个下拉框，用于选择JS文件，还有后退以及前进按钮，可以快速地返回之前调试的JS文件。左侧 阅读全文
Sencha Touch 1.x 快速入门 第一章 开发Sencha Touch App
2011-08-09 13:08 by 威老, 13618 阅读, 收藏, 编辑
摘要：
接触Sencha Touch已有近一个月的时间，在探索它的同时，走了不少的弯路。也有了不少的发现和体会。在此分享给各位，希望不管新手还是老鸟，都能在这篇文章里有所收获。Sencha Touch简介Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。下面是Sencha官方给出的几点特性1.基于最新的WEB标准 – HTML5，CSS3，JavaScript。整个库在压缩和gzip后大约80KB，通过禁用一些组件还会使它更小。2.支持世界上 阅读全文
Sencha Touch 自定义List的三种实现方案
2011-08-04 09:51 by 威老, 12760 阅读, 收藏, 编辑
摘要：
在sencha touch的list里嵌入自己想要的控件，有多种选择方案。其中一种是直接在itemTpl相应的地方加上html标签(如<button><input>)创建html控件。效果如下：蛋疼了吧。。。风格不统一，而且要给按钮加事件也显得比较别扭。这个方案，当然还是有它的好处的，这是所有方案中效率最高的一个。如果你使用的是图片按钮，自然也是可以很协调的。如果我们想要用框架原有的按钮怎么办，这就是本篇文章的重点了。第二种方案先看效果这个方案，要求你对Sencha Touch框架有一定程度的了解，当然，学习它也能让你对这个框架有更深一层的认识。废话不说直接上代码。li 阅读全文