本文共 1295 字，大约阅读时间需要 4 分钟。

距离上次写日志已经非常之久了，主要是中途有一个期中考试，呵呵大学也有期中考试，这也是我大学最后的考试周了！闲话少说，这次我接着上一次的写，主要是写第一个APP，按照老规矩，应该是Hello World!，已经有一段时间没接触Web 开发了，所以先上官网看看，刚好有这个例子，自己先试着做一遍，慢慢熟悉熟悉，呵呵！

首先必须下载Sencha Touch SDK,这个我们上次已经下载好了，SDK里面包含一些文档，示例等文件，当然，里面最重要的还是我们做开发要用到的两个文件：sencha-touch.js，sencha-touch.css！

接下来我们就来创建这次的工程，首先约定的工程目录为：workspace/helloworld，在它下面新建index.html文件，在它下面建立子目录lib，将SDK中的文件当到lib目录下，这里我们把所有的SDK包含的文件都放在下面，其实并不是所有文件都有用，这时我们第一次写，所以全放进去，等熟悉之后就知道该放哪些文件了！最后的目录应该如下图所示：

打开index.html文件，加入如下内容：

            
                            
            这个相信大家都能看懂！这样基本的框架搭建好了，此刻用浏览器浏览index.html文件发现没有任何内容，这是因为我们的标签中没有任何内容，我们一般都用JavaScript文件实现我们的UI和显示的内容。一般情况下，我们都将自己的Application Code放在单独的.js文件中，然后向上面那样通过link来引用，但这个hello world实在是太简单了，我们直接添加再index.html文件中，即再上述index.html文件的标签对中添加如下内容：

下面对上述代码做一些说明：

new Ext.Application({    ...});相信很多人对这个结构都很熟悉，这几行的作用就是实例化一个Ext.Application类，我们传递给这个构造器的参数是一个可以设置属性参数的对象，例如使用者再添加浏览器书签时显示的图标等！一般情况，我们传递的最重要的参数是当文档完全加载时应用所执行的动作，这就是我们所知道的'launch' 属性，'launch' 属性应该被定义为一个函数，如下所示：

launch: function() {    ...}我们可以在这个函数里面编写应用所有的UI代码！

new Ext.Panel({    ...});在这个应用中，我们仅仅实例化了一个UI组件：Panel。至于UI组件，我们再接下来的文章中会专门讲解，然后就给这个Panel组件设置了两个属性，一个是显示的大小：全屏显示；另一个是显示的内容：Hello World.好了，到这里基本内容已经结束，我们来看一下效果，推荐使用的浏览器是 Chrome or Safari，但我只装了FireFox，测试结果如下

然后有用Android的模拟器测试了一下，效果如下图：

好了，今天先到这里了，接下来会介绍一下UI组件！

转载地址：http://opqab.baihongyu.com/