移动web应用开发-Sencha Touch篇(1)

这里希望通过我自己的学习经历，给大家写出最通俗，最方便的HTML5框架使用指南。

2016年，更加关注移动web应用相关开发，重心也放到了基于HTML5的移动app开发。从今天开始将展开Sencha Touch的学习之旅。

Sencha Touch是一款移动web应用开发框架，界面美观，接近原生。

万事开头难，今天我们先来进行文件下载和开发环境的配置。

sencha.com/products/touch， 在这个网站上可以免费下载Sencha Touch所有相关文件。进入之后点击右侧的下载，会进入一个界面需要填一下信息。这里除了邮箱之外其他的都可以乱填。填好之后他会把下载链接发到你填写的邮箱里。在邮箱里点击下载链接就可以了。

下载好后，我们可以首先将他部署到我们本地的服务器上，这样就可以查看里面大量的demo，都比较好看，在example文件夹里(不需要现在就研究example的原理)。另外也提供了完整的文档可供参考。

下面就是如何自己开始编写Sencha Touch应用了。这里有一个地方需要格外注意：Sencha Touch采用的是动态加载技术。也就是说，不是仅仅在index.html内引入需要的js和css文件就可以了，而是要保证所有需要的文件都能在需要的时候正确的通过目录进行加载(所有需要动态加载的文件都在src中)。
因此，为了保证动态加载的正常运行，我们一定要按规定设定我们的工作目录。

在根目录下(touch-2.....)创建我们的工作目录Demo，在该文件夹下创建index.html文件和一个js文件夹，文件夹内创建app.js。

在index.html中，我们首先要引入必要的文件(注意：这些基本操作可以不在服务器上进行也能实现功能，完全不涉及数据传输及后台逻辑)

<link type="text/css" rel="stylesheet" href="../resources/css/sencha-touch.css">
<script src="../sencha-touch-debug.js"></script>
<script src="js/app1.js"></script>

其中第一个引入了必要的css文件，第二个引入的是js文件，使用这两个文件就可以搭建出Sencha Touch框架了。app.js是我们自己编写代码的js文件，Sencha Touch是一个javascript框架，因此大多数功能、布局等都是通过app.js实现的。

要验证框架是否搭建成功，在app.js中编写如下测试代码：

Ext.application({
    name: 'MyApp',
    lauch: function () {
        alert("Sencha 已加载");
    }
});

运行index.html，如果能正确弹出对话框，则表明环境搭建成功，可以进行Sencha Touch之旅了！

作者： fareise
原文： http://blog.csdn.net/fareise/article/details/50479711