Sencha touch 开发系列:如何学习Sencha touch 移动应用开发

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访问了http://192.168.203.162/docs/

你可以浏览看看，了解下ST。

3.开始开发ST应用了.

先一个编辑器，Aptana studio 3 或Adobe Dreamweaver CS6(5.5也可以)

在这我就用DW CS6(这玩意去哪下载，百度搜下哈)

安装好DW，可以新建一个站点。

站点建好了。OK，准备进入开发了。

我们为站点建立好结构,并把ST的库放到对应的目录下如图：

OK,开始实战开发了

打开index.html

添加apple.css 皮肤和sench-touch-all-debug.js及应用程序入口app.js的引用

我们添加app.js的启动代码

//启用自动加载
Ext.Loader.setConfig({
    enabled: true,
	paths: {
          'Helloword': 'app'
      }
});

//应用程序入口
Ext.application({
	//应用程序名
    name: 'Helloword',    
	//需要加载的View
    views: [],
	//数据模型
	models: [],
	//数据存储
	stores: [],
    //需要加载的控制器
    controllers: [],    
    //应用程序启动
    launch: function(){	
		
		
    }    
});

Ext.Loader.setConfig主要用来来告诉我们应用程序，去哪个路径下加载我们的应用view,model,controller
你现在保存，可以浏览我们的index.html页面了，不过这时是空白的，啥也没有。
因为在我们的launch代码中，啥也没有呢。
我们开始创建第一个界面
在app->view目录下添加一个hello.js的文件，然后开始定义View

//第一个Hello View
Ext.define('Helloword.view.Hello',{
	extend: 'Ext.Container',
    alias: 'widget.hello',
	config:
	{
		items:[{xtype:'titlebar',title:'我的第一个应用!'}],
		html:'hello 刘江!'
	}
});

OK，我们的第一个view做好了，现在如何让他显示呢？

看我们的app.js

//启用自动加载
Ext.Loader.setConfig({
    enabled: true,
	paths: {
          'Helloword': 'app'
      }
});

//应用程序入口
Ext.application({
	//应用程序名
    name: 'Helloword',    
	//需要加载的View
    views: ['Hello'],
	//数据模型
	models: [],
	//数据存储
	stores: [],
    //需要加载的控制器
    controllers: [],    
    //应用程序启动
    launch: function(){	
	
		//创建我们的第一个hello View，并告诉它，让他全屏显示
		Ext.create("Helloword.view.Hello",{fullscreen:true})	
    }    
});

修改好后，保存，然后浏览index.html页面，这样，我们的一个helloword应用就做完了！

 

 

 

 

作者：Louja
出处：http://html5mob.cnblogs.com 同步在：http://html5mob.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此声明，且在文章页面给出原文连接，否则保留追究法律责任的权利。