Sencha Touch 快速入门2.0

SenchaTouch快速入门2.0目录入门篇..................................................2第一章开发SenchaTouchApp............................................................................2第二章Chorme浏览器调试功能介绍.................................................................9第三章布局(1)Box布局....................................................................................13第三章布局(2)Card布局...................................................................................16第四章Api文档看懂了吗？..............................................................................18技巧篇.................................................21SenchaTouch自定义List的三种实现方案.......................................................21SenchaTouch为tabPanel添加一个更多按钮..................................................24SenchaTouchTabPanel的左侧TabBar...............................................................292/31CP|私人文件入门篇第一章开发SenchaTouchApp接触SenchaTouch已有近一个月的时间，在探索它的同时，走了不少的弯路。也有了不少的发现和体会。在此分享给各位，希望不管新手还是老鸟，都能在这篇文章里有所收获。SenchaTouch简介SenchaTouch可以让你的WebApp看起来像NativeApp。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的WEB标准，全面兼容Android和AppleiOS设备。下面是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等方式绑定到组件模板，写入本地离线存储。看看SenchaTouch框架先下载SenchaTouch框架下面让我们看看下载的包里都有哪些东西。将下载的sencha-touch开发包解压我们可以看到以下文件3/31CP|私人文件docs是官方的api文档文件、examples是官方提供的示例程序。Jsbuider用来对js文件进行发布前的处理。主框架这里有三个文件可供选择，sencha-touch.js、sencha-touch-debug.js、sencha-touch.-debug-w-comments.js这三个文件的区别在于，sencha-touch-debug.js是有缩进的，便于调试、sencha-touch.-debug-w-comments.js是有注释的，便于我们了解框架底层是怎么实现的。resources文件夹下我们可以看到这是框架的样式文件，同样，css-debug文件夹下是有便于调试的.css文件。打开文件夹，我们又可以看到，这分别是框架带给我们的四个主题。只会影响界面的显示效果，为了保持显示上的一致，我们可以在面向android的应用上使用android.css而面向iphone的应用，使用apple.css。甚至我们可以提供主题切换功能让用户自行选择主题，但这都是后话了。其他的文件我也不清楚，就不再介绍了。重中之重--你的浏览器4/31CP|私人文件开发js的时候，没有什么是比一款优秀浏览器更重要的了。chorme、safari。都是不错的选择。(FireFox不支持SenchaTouch框架)笔者使用的是google的chrome浏览器。没有的话就快去下一个呗。地址给你chorme官网关于chorme浏览器的调试功能，我会在下一篇教程中介绍。开发环境AptanaStudio跟大家分享的是一款优秀的js集成开发环境：AptanaStudio。先看看它有什么令人兴奋的特性吧。↓不可多得的Javascript(AJAX)开发工具－AptanaAptana使用入门一：CodeAssist目前最新版本是AptanaStudio3.0.3，下载地址注：笔者跟不上潮流使用的还是Aptana2下载并安装好它，下面进行一些简单的配置：选择Run-RunConfigurations...在弹出的DebugConfigurations中设置好浏览器路径Browserexecutable，也就是你安装浏览器的位置。跟我一起开始快乐的SenchaTouch之旅吧！第一个SenchaTouch项目1.首先点击左上角的图标，创建一个新的项目。在弹出的窗口中选择DefaultWebProject。输入Projectname如：HelloTouch，并点击Finish。这样便新建了一个普通的Web项目。5/31CP|私人文件2.开发过程中，我们统一使用方便调试的debug文件。Css文件方面，我们选择了框架默认的sencha-touch.css。直接将sencha-touch-debug.js以及css-debug文件夹拖入File窗口里我们刚建的项目中。这里要注意，拖入文件的时候sencha-touch.css不会随着css-debug文件夹一起加入项目，要另外拖一次。结果如下图所示3.双击打开index.html，在head/head标签之间加入linkrel=stylesheethref=css-debug/sencha-touch.csstype=text/css以及scripttype=text/javascriptsrc=sencha-touch-debug.js/script。接着点击图标，选择JavaScriptFile创建我们自己的js文件，命名为app.js。然后在index.html中引入这个文件，方法跟上面引入sencha-touch-debug.js是一样的。6/31CP|私人文件到现在我们得到了这样的一个index.html。4.打开app.js输入我们的程序代码/***@authorweilao*/varhelloTouchApp=newExt.Application({//利用框架的Application类的构造函数构造一个应用name:'myApp',//为这个应用指定名称7/31CP|私人文件useLoadMask:true,//页面读取完毕前会显示“Loading...”字样launch:function(){//这是程序的入口Ext.Msg.alert('Hi','HelloSenchaTouch',Ext.emptyFn);//弹出窗口标题Hi，内容HelloSenchaTouch}});5.最后，右键点击index.html选择SetasStartPage，设置index.html为项目首页。8/31CP|私人文件至此，我们的第一个SenchaTouch项目就构建完毕了，点击打开index.html看看成果吧。Tips:双击index.html之后系统会自动在CodeAssist中加入js文件关联，这样，在编辑其中一个文件的时候也能够享受到其他文件的代码提示了。但是当你关闭index.html之后，自动添加的关联又会删除。不过，只要如下操作便能让关联持久存在：打开References窗口，在index.html(Auto-created)上点击右键，选择MakeProfilePermanent即可。9/31CP|私人文件第二章Chorme浏览器调试功能介绍大家好，今天再为大家奉献一篇入门教学，这次是关于浏览器调试的。无论你是在学习，还是做项目，熟练地掌握浏览器的调试功能，都将会有很大的帮助。调试能够帮助你快速地了解框架，处理bug，让你不论处理什么都能够更快速，更准确。在这篇文章里，我将详细地为大家介绍chrome浏览器中常用的调试功能，对于其他的浏览器，大家同样可以触类旁通。接下来-打开chrome-按F12。开始chorome调试之旅吧！一、JS调试选中Script标签之后，我们来到了JS调试界面。10/31CP|私人文件为大家讲解一下各个区域的作用。左上角有一个下拉框，用于选择JS文件，还有后退以及前进按钮，可以快速地返回之前调试的JS文件。左侧的代码窗口，用处自然不必多说。在行数的地方点击鼠标可以设置断点。程序运行到断点处时，可以鼠标在代码上悬停，以查看变量、表达式的值。右上角的几个小按钮，用于控制程序的执行（当然，要设置断点以后才有用。）功能分别为执行至下一个断点（F8）、执行至下一个函数调用结束(F10)、执行至下一个函数内部(F11)、跳出当前函数(Shift+F11)、禁用所有断点。11/31CP|私人文件右侧的第一个区域，用于观察变量。点击‘+’添加你要观察的变量或者表达式，这样的话，无论程序运行到哪里，你都能够监视一些重要的值。右侧的第二个区域是函数的调用堆栈。在这里，我们可以看到函数的嵌套调用结构，点击可以快速转到函数的所在位置。右侧第三个区域，同样是用于观察变量的。这里分为Local和Global两个。Local里，可以看到所有的当前作用域内的变量。而Global基本可以看到所有全局变量。右侧第四个区域，断点管理。按Esc键快速调出下面的的控制台，在这里可以看到程序的各种输出，。包括log、警告、异常。如果我们在代码里面写了console.log(o);语句，则o会在这里作为对象被输出，这是调试过程中比较常用的功能。该值得一提的是，在这里，我们可以直接输入代码，立即执行。其他区，大家自行探究吧，说了这么多，剩下的也就是孰能生巧啦。二、CSS样式调试好吧，这回，我们不用F12。换个cool的方法。在页面上你想调试的元素上点击右键-审查元素(N)。然后，你就快速地来到CSS调试界面，并且已经帮你定位好元素。左侧是实时html结构。右侧第一个区域是所有对当前元素起作用的CSS属性。12/31CP|私人文件右侧第二个区可以看到文件里相应的CSS原文。在这里，你可以直接对实时html结构进行编辑、可以对css进行编辑。重点是，你可以马上看到修改的效果，再也不用一遍又一遍地刷新页面了！威老感叹，这调试工具强大的一塌糊涂，但不知道火狐之类的浏览器调试功能如何呢。也不必多想了，SenchaTouch只支持chrome和safari，火狐再强大也用不上。13/31CP|私人文件第三章布局（1）Box布局SenchaTouch里的布局有五种ohboxovboxocardofitoauto[默认]实际上可以分为Box布局和Fit布局两种。Senchatouch里的布局应该理解为：该控件内部子项的排列方式。我们今天先来看看bo