(入门篇02)BuildingyourFirstApp.docVIP

Building your First App 作者：一夕 QQ：944281625 本系列文章为翻译文章，翻译自API文档，也是入门级别的文章，请初学者仔细阅读，如果翻译有不妥的地方，请谅解，如果转载请注明作者及出处。 Preparation 紧接着我们上一篇翻译的文章Getting Started Guide，在上一篇文章中，我们已经介绍了关于Sencha Touch的一些基本知识，也指导你完成了SDK以及SDK Tools的安装以及一些简单的使用，如果这些你都已经了解了，那么就看下面的内容吧。 What were going to build 我们首先来看看我们今天需要学习的这个特别简单的应用程序吧：我们这个应用程序是基于手机的浏览器的，主要由home页，联系人表单，以及我们的blog这三个基本页面构成，程序截图如下： Getting Started 首先我们需要做的便是搭建起我们需要的应用程序，像我们上一篇文章中提到的那样。这个简单的app使用了tab panel，包括了4个页面，我们先来看看什么是tab panel： 其实TabPanel本来应该是出现在屏幕的上方，像我们上面的截图就是一个标准的TabPanel的例子。为了让我们的home界面更加友好，我们把tab bar放在页面的底部，我们可以通过tabBarPosition的配置项来实现这个需求。 现在看起来是不是好多了，具体实现代码如下：  HYPERLINK D:\\sencha\\docs\\index.html \l !/api/Ext-method-application Ext.application({ name: Sencha, launch: function() {  HYPERLINK D:\\sencha\\docs\\index.html \l !/api/Ext-method-create Ext.create( HYPERLINK D:\\sencha\\docs\\index.html \l !/api/Ext.tab.Panel Ext.tab.Panel, { fullscreen: true, tabBarPosition: bottom, items: [ { title: Home, iconCls: home, html: [ img src=/img/sencha.png /, h1Welcome to Sencha Touch/h1, pYoure creating the Getting Started app. This demonstrates how , to use tabs, lists and forms to create a simple app/p, h2Sencha Touch (2.0.0)/h2 ].join() } ] }); } }); 我们在上面的预览图片中已经发现，那些文字性的东西都堆积在屏幕下方，并且也不是很美观，这个时候我们就需要通过cls配置项来给我们的内容添加一个CSS类。我们目前使用的是系统中已经写好的，当然我们也可以使用我们自己的CSS类，不过我们以后会讨论这些内容。在上面的代码的items中添加一项cls，内容为：cls:’home’。这是我们的界面就美观多了，效果如下： Adding The Blogs Page 既然我们现在已经有了一个看的过去home页面了，那么我们也该把令一个界面添加到屏幕上了。为了简单起见，我们只单独的创建这些界面，最后再把他们在一起编译。 我们需要添加一个List，包括我们的Blog内容，接口由Google’Feed API service提供，至于该接口使用，你可以去google一下。在编写代码之前，我们先来看看我们完成之后的效果吧： 我们并不查看完整的代码，我们先来一块块的对整个功能进行分析，我觉得这样的话，应该能更好的理解这个功能是如何实现的。 首先我们使用Nested List，目的就是我们在单击ListItem的时候可以进一步访问我们的Blog内容。  HYPERLINK D:\\sencha\\docs\\index.html \l !/api/Ext-method-application Ext.applicati