摘要： 我们知首了类的定义与创建，是否有将类与我们ST中的UI组件联系起来呢？比如你常常会这样写义一个view：//声明一个自己的容器类：Demo.MyContainerExt.define('Demo.MyContainer',{ extend:'Ext.Container'});//创建自己的的容器并全屏显示Ext.create("Demo.MyContainer",{fullscreen:true,html:'我自定义的容器类!'});我们用Ext.define声明了一个类，他继承了ST的容器组件，这样他是一上类，继承了ST的U 阅读全文

摘要： 类是啥玩意呢？我想玩过面象对象语言的人，对它一点也不会陌生了。我还是重申下这玩意吧类是对象概念在面向对象编程语言中的反映，是相同对象的集合，类描述了一系列在概念上有相同的含义的对象，并为这些对象同一定义了编程语言上的属性和方法。例如：动物是一个类，狗、鸡、猪也是类。但是他们的具体的属性和方法可能不完全相同。ST中有强大的类系统定义模型，可以很轻松的创建javascript类。ST中大家用到的东西都已封装成类，如：组件/容器，事件模型，数据模型，数据存储，控制器......等等！下面我们就来讲讲，如何定义类？其实，你在学习组件，的时候已经用到了！用Ext.define来声明一个类//声明一个动物 阅读全文

摘要： nestedList和navigationview其实没啥直接的关系,同根生，都是容器组件而以，操作上有点点相似的地方就是，在显示下一层的时候会自动创建toolbar和返回铵钮,先了解这么多，下面慢慢玩玩它们两个。nestedList就是一个树导航组件，它需要绑定树型的数据结构treestorenavigationview是个有趣的导航组件，他可以像栈一样，去操作view。通过调用push来显示下一层view，通过pop来关闭当前显示的子view先来玩nestedList吧//定义一个数据模型，它只有一个text字段Ext.define('ListItem', { extend 阅读全文

摘要： tabpanel,carousels这两玩意极其常用，这两玩意也很像，它们都是card类布局，在他们里面都可以放多个组件，tabpanel是通过它的导航切换(先项卡)，而carousels是通过滑动进行子项切换的（可左右切换，也可上下切换）。下面我们来玩tabpanel//创建一个全屏的tabpanelExt.create('Ext.TabPanel', { fullscreen: true, //选项卡（导航栏在下方） tabBarPosition: 'bottom', items: [ { title: 'Home', ... 阅读全文

摘要： dataview就是数据展现组件list是由dataview派生过来的, 美观了一些多些也多了一些功能，如分组显示，索引导航，disclose按钮...下面我们就来学习下dataview的用法及list的用法，学习他们之后你需要了解啥时后用dataview啥时后用list就像上一篇一样，你需要知道你啥时用panel啥时用formpanel一样。dataview最重要的两个配置就是store（数据源）itemtpl(数据项显示模板)下面来一段小代码，实践中学习。//创建一个全屏的DataViewvar touchTeam = Ext.create('Ext.DataView', 阅读全文

摘要： panel是一个非常有用的容器，它是由container派生出来的，它的功能基本和container一样。唯一区别是它可以做为一个弹出层（浮动在其他组件之上），其实container也可以，只是ST并未提供对应的样式效果。给大家一个小例子对比一下：//创建一个按钮var button = Ext.create('Ext.Button', { text: '一个普通按钮', id: 'rightButton', handler:function() { //使用panel做为弹出提示 Ext.create('Ext.Panel', 阅读全文

摘要： 本来这一篇打算讲ST2最值得骄傲的MVC，有同学感觉太快了，所以我再插入一篇专讲容器（Container），因为几乎每个ST应用都会用到这玩意。它非常重要。容器也是由组件派生而来。为什么我说每个应用都会用到容器呢？因为就连我们ST应用的顶层全局组件Ext.Viewport（每个应用的所有内容都包含在我们的Ext.Viewport这个全局容器下）也是由Container派生而来的。在ST中有好几个容器组件，如：panel,tabpanel,carousel,dataview,list,formpanel等！各种容器作用都不一样，这需要我们在熟悉各种容器后， 根据实际业务需求而选择。比如，页面上让 阅读全文

摘要： 你如果对ST的组件有了一些认识后，然后你又想做一些东东来体验下ST。拿到设计图后，那么你就需要好好的规划你的应用，需要哪些组件，各组件都应该摆放在哪里？这个时候你就需要了解一下ST里面的布局（layout)同样，打开我们的API文当http://docs.sencha.com/touch/2-0/#!/api找到layout,并展开，我们可以看到ST为我们提供了：vbox,hbox,card,fit有人肯定会问还有abstractBox,和defaultabstractBox（抽象盒子）是vbox和hbox的父类，是default的子类，default（默认）提所有布局的基类，一般不需要提交所 阅读全文

摘要： 玩好ST那么就必须了解 ST中的所有组件，组件的基本方法，事件，和一些属性，如果复写组件，你还必须了解组件是如何创建的，需要深读源码。那么怎样去看各组件的方法，事件，属性及源码呢？请打开：http://docs.sencha.com/touch/2-0/点击上面的齿轮，你可以看到ST所有的API，你再点Component，在右边你可以看到所有的组件，你可以从字面意思去认识知。然后，一个个玩玩，知道各组件是干啥的，想想适用于啥场景。好，那们我如何玩组件呢？看图：点开Ext.Toolbar,这时你将打开Toolbar的API页看到上面的红线标记了吗？最上面有config（属性，配置），method 阅读全文

摘要： Sencha touch是一个基于HTML5的移动应用开发框架（Sencha touch下面简称ST）所以学习这玩意，需要对HTML5有点点了解，对javascript有些基础。如果你没有一点点JS知识，那么还是先去吃点JS垫底。1.首先我们需要下载ST的开发库.下载地址：http://www.sencha.com/products/touch/2.解压下载好的sencha-touch-2.0.0-commercial.rar，然后将他部署在web服务器上,这主要为了方便我们学习，方便API这里我将他部署在IIS下OK,这样我们可以在本地方便的查看ST的开发指南，API文档可以通过本地IP访问 阅读全文