sencha touch 学习笔记- 安装与环境

环境搭建视频共享链接

百度网盘:http://pan.baidu.com/s/1mg5DpS8

参考资料：

/article/4977508.html

http://www.admin10000.com/document/140.html

这里我主要讲的是如何加入全局变量、公用类、自定义扩展、资源文件

官网地址：http://www.sencha.com/products/touch/

官当最新doc：http://docs.sencha.com/touch/

1.环境搭建

　　a.安装java

　　　　先下载JAVA，下载地址：http://www.oracle.com/technetwork/java/javase/downloads/index.html

　　　　安装到指定路径，例如F:\Java

　　　　打开计算机属性——高级系统设置——环境变量（如上文）

　　　　配置环境变量

　　　　　　变量： JAVA_HOME 值： 安装路径：F:\Java\jdk1.6.0_10

　　　　　　变量： Path 添加值：%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

　　　　　　变量： CLASSPATH 添加值：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

　　　　JAVA配置完成，接下来验证配置是否成功。

　　　　击运行——输入cmd——回车——输入javac——回车，，如果出现一堆英文，如下图所示，即表示配置成功。

　　b.安装cmd

　　　　再下载 sencha touch 的sdk （一个js压缩包），现在最新的版本为2.3，我用的2.2.1版本

　　　　下载地址：http://www.sencha.com/products/touch/download/

　　　　然后下载 sencha touch cmd，一个工具，主要用来创建项目、生成测试包、部署包等，我用的4.0版本

　　　　下载地址：http://www.sencha.com/products/sencha-cmd/download/

　　c.安装ruby

　　　　用 sencha touch cmd 生成测试包或部署包时调用的命令需要ruby，主要用来做js和css压缩

　　　　下载地址：http://rubyinstaller.org/ （ps：需要下载1.93的版本，不要下载2.0的版本）

　　　　安装过程出现如下界面。如图

　　　　


　　　　有3个选项分别是：(1) 是否安装tclTk支持。(2) 添加ruby命令路径到系统环境变量PATH。(3)是否将 .rb 和.rbw 文件关联到Ruby。

　　　　这里选择第二项即可

　　　　安装之后 测试cmd 是否安装成功

　　　　运行-》cmd ；输入sencha，看到下面的就说明cmd安装好了

　　　　


　　　　检测当前cmd版本

　　　　sencha upgrade --check

　　　　更新cmd

　　　　sencha upgrade

　　　　如果你想升级到测试版

　　　　sencha upgrade --check --beta

　　　　sencha upgrade --beta

2.创建项目：

在cmd中输入以下命令

sencha -sdk D:\ASPX\touch-2.2.1 generate app app D:\ASPX\Test

D:\ASPX\touch-2.2.1:你选择的sdk根目录

app D:\ASPX\Test：在指定目录创建一个项目，命名空间为app



在谷歌浏览器中可以直接运行，不必搭建服务器。

如果开发过程中涉及到跨域问题，可以如下处理

找到谷歌浏览器，为其创建一个快捷方式，加入以下命令。--disable-web-security



关闭所有已经打开的谷歌浏览器，然后用你创建的快捷方式再次打开



把项目中index.html文件拖入即可。

3.加入全局变量以及公用类js



这是一个简略的开发环境

如图在app文件夹中加入config.js(全局变量),util.js(公用类)

他们的代码分别如下

/*

*所有配置信息

*/

Ext.define('app.config', {

alternateClassName: 'config', //设置别名是为了方便调用，这样直接config.weather就能获取到变量。

statics: {

//天气预报接口

weather: 'http://www.weather.com.cn/data/cityinfo/101210904.html',

//博客园

Cnblogs: 'http://www.cnblogs.com/mlzs/rss'

}

});

复制代码

/*公共类*/

Ext.define('app.util', {

alternateClassName: 'util',

statics: {

//加载stroe

storeLoad: function(id) {

var store = Ext.getStore(id);

if (store.getCount() < 1) {

store.load();

}

},

//Viewport添加新项,Viewport之中始终只有一项

ePush: function(xtype) {

var me = Ext.Viewport,

view = me.getActiveItem();

if (view && view.getItemId() == xtype) {

return;

}

view = Ext.create(xtype, {

itemId: xtype

});

//切换

me.animateActiveItem(view, {

type: 'slide',

direction: 'left'

});

},

//监控Viewport界面切换,切换时销毁旧项

eActiveitemchange: function() {

var me = Ext.Viewport;

me.onAfter('activeitemchange',

function(t, value, oldValue, eOpts) {

if (oldValue) {

//强制销毁，防止销毁不完全引发错误

me.remove(oldValue, true);

}

});

},

/*为Ext.Viewport添加一个消息提示组件*/

addMessage: function() {

Ext.Viewport.setMasked({

xtype: 'loadmask',

cls: 'message',

transparent: true,

indicator: false

});

this.hideMessage();

},

/*显示一个消息提示*/

showMessage: function(mes, autoHide) {

var me = this,

message = this.getMessage();

message.setMessage(mes);

message.show();

//是否自动关闭提示

if (autoHide) {

setTimeout(function() {

message.hide();

},

500);

}

},

/*隐藏消息提示*/

hideMessage: function() {

this.getMessage().hide();

},

//消息组件

getMessage: function() {

return Ext.Viewport.getMasked();

},

//重写ajax

overrideAjax: function() {

var me = this;

//开始加载

Ext.Ajax.on('beforerequest',

function(connection, options) {

if (!options.hidMessage) {

me.showMessage('正在努力加载中...');

}

});

//加载成功

Ext.Ajax.on('requestcomplete',

function(connection, options) {

me.hideMessage();

});

//加载失败

Ext.Ajax.on('requestexception',

function(connection, options) {

if (!options.hidMessage) {

me.showMessage('加载失败，请稍后再试...', true);

}

});

},

//重写list

overrideList: function() {

//重写分页插件

Ext.define("Ext.zh.plugin.ListPaging", {

override: "Ext.plugin.ListPaging",

config: {

//自动加载

autoPaging: true,

//滚动到最底部时是否自动加载下一页数据

noMoreRecordsText: '没有更多内容了',

loadMoreText: '加载更多...' //加载更多按钮显示内容

}

});

//重写List

Ext.define("Ext.zh.List", {

override: "Ext.List",

config: {

//取消选择效果

selectedCls: '',

//禁用加载遮罩，防止跳转时页面卡顿，使用统一的遮罩效果

loadingText: false,

emptyText: '没有更多内容了'

}

});

},

//app初始化执行

inIt: function() {

this.eActiveitemchange();

this.overrideList();

this.overrideAjax();

this.addMessage();

}

}

});

复制代码

直接utli.inIt();

config.weather就可以直接使用

创建一个ux文件夹，里面放置扩展插件。例如：

/*

*模仿tabpanel导航栏

*/

Ext.define('ux.TabBar', {

alternateClassName: 'tabBar',

extend: 'Ext.Toolbar',

xtype: 'tabBar',

config: {

docked: 'bottom',

cls: 'navToolbar',

layout: {

align: 'stretch'

},

defaults: {

flex: 1

},

//被选中的按钮

selectButton: null

},

initialize: function () {

var me = this;

me.callParent();

//监听按钮点击事件

me.on({

delegate: '> button',

scope: me,

tap: 'onButtonTap'

});

},

//更新被选中按钮

updateSelectButton: function (newItem, oldItem) {

if (oldItem) {

oldItem.removeCls('x-tabBar-pressing');

}

if (newItem) {

newItem.addCls('x-tabBar-pressing');

}

},

//当按钮被点击时

onButtonTap: function (button) {

if (!button.getInitialConfig('noSelect')) {

this.setSelectButton(button);

}

},

/**

* @private

*执行添加项，调用add方法后自动执行

*/

onItemAdd: function (item, index) {

if (!this.getSelectButton() && item.getInitialConfig('selected')) {

this.setSelectButton(item);

}

this.callParent(arguments);

}

});

复制代码

在app.js中需要加入

//指定ux起调目录

Ext.Loader.setPath({

'ux': 'app/ux'

});

//简略写法

Ext.application({

name: 'app',

appFolder: 'app',

controllers: ['Main', 'Panel', 'Layout', 'List'],

requires: ['app.config', 'app.util'],

launch: function () {

util.inIt();

}

});

复制代码

这样就可以通过ux.TabBar来使用自定义控件了

例如：

Ext.define('app.view.MyBar', {

alternateClassName: 'myBar',

extend: 'ux.TabBar',

xtype: 'myBar',

requires: ['app.view.About'],

config: {

items: [

{

xtype: 'button',

text: '首页',

//只有第一个设置的属性有效

selected: true,

action: 'redirect',

redirect: 'home'

},

{

xtype: 'button',

text: '关于',

action: 'redirect',

redirect: 'about'

},

{

xtype: 'button',

text: '其他',

//没有选中效果

noSelect:true,

action: 'other'

}]

}

});

复制代码

下面是资源文件的引入

在app.json文件中：

通过resources来配置资源文件，这样使用cmd打包时才会将资源文件复制到生成的项目中

下面是我的app.json,其中有我对各个配置的理解

{

/**

* 项目的命名空间

*/

"name": "app",

/**

* 项目起始html文件，路径相对于此app.json文件

*/

"indexHtmlPath": "index.html",

/**

* 运行此项目的url路径，比如: "http://localhost/myapp/index.html".

*

*当设置此值时，将不能通过文件系统直接访问。

*/

"url": null,

/**

* 所需引用js文件

* 单个格式如下

* {

* "path": "path/to/script.js" // 文件路径，如果本地文件，路径相对于此app.json文件

* "remote": true // (可选值)

* // -默认值为"false"

* // -"true"，如果这个文件是一个远程文件不会被复制

* "update": "delta" // (可选值)

* // 如果没有指定，这个文件将只加载一次，

* // 缓存到localStorage里面，直到这个值被改变。

* // - "delta" 增量更新此文件

* // - "full" 当文件改变时，完全更新此文件

* "x-bootstrap": true // (可选值)

* // 表示这是项目依赖文件。

* // 该文件不会被复制到生成目录或引用

*

* }

*/

"js": [{

"path": "touch/sencha-touch.js",

"x-bootstrap": true

},

{

"path": "app.js",

/* 表示所有的类生成到这个文件 */

"bundle": true,

"update": "delta"

}],

/**

*所需引用js文件

* 单个格式如下

* {

* "path": "path/to/script.js" // 文件路径，如果本地文件，路径相对于此app.json文件

* "remote": true // (可选值)

* // -默认值为"false"

* // -"true"，如果这个文件是一个远程文件不会被复制

* "update": "delta" // (可选值)

* // 如果没有指定，这个文件将只加载一次，

* // 缓存到localStorage里面，直到这个文件被改变。

* // - "delta" 增量更新此文件

* // - "full" 当文件改变时，完全更新此文件

*

* }

*/

"css": [{

"path": "resources/css/app.css",

"update": "delta"

},

{

"path": "resources/css/main.css",

"update": "delta"

}],

/**

*项目生成时用于自动生成HTML5应用程序缓存清单（cache.manifest）

*/

"appCache": {

/**

* 本地缓存名单

*/

"cache": ["index.html"],

/**

* 网络缓存名单

*/

"network": ["*"],

/**

* FALLBACK缓存名单

*/

"fallback": []

},

/**

* 项目生成时需要复制的资源文件

*/

"resources": ["resources/images", "resources/icons", "resources/startup"],

/**

* 项目生成时忽略的文件/目录名称匹配，必须是有效的正则表达式

*/

"ignore": ["\.svn[ DISCUZ_CODE_5 ]quot;],

/**

* 之前生成项目储存目录，用于进行增量更新，不可随意改变此目录下的文件

*/

"archivePath": "archive",

/**

* 在cmd创建时需要引用的类

*/

"requires": [],

/**

* 唯一ID，作为localStorage前缀。

* 通常情况下，你不应该改变这个值。

*/

"id": "d8504e05-a9fc-4692-bdbc-94c3190751f5"

}

复制代码

4.通过cmd生成项目

运行命令行工具，进入你的项目目录



运行cmd生成命令：

sencha app build native：直接打包成本地苹果或者安卓应用，具体参见/article/5153288.html

sencha app build production:生成web包,主要用于发布web版本

sencha app build package：生成压缩包

sencha app build testing：生成测试包

生成过程中，有错误请根据提示进行排错



如上生成成功

示例demo可以看这里：/article/5153275.html

此项目为了开发方便对结构进行了简化，使用cmd生成一个命名空间为app的项目，将demo项目中的文件复制到对应app项目目录中，使用cmd打包成功（已测）

项目build目录下可以找到生成之后的项目

类似下图：