sencha touch 类的使用



sencha touch 有一套自己的类机制，可以以面向对象的方式去写代码，封装业务逻辑，sencha touch 的组件、插件、api等都建立在这一套类机制的上面

在实际开发中，我们需要遵循这一套机制，以免造成不必要的麻烦。

 

所以的类都是继承于Ext.Base

定义一个类的语法：Ext.define(className, properties);

其中className是类名，properties属于配置。

 

sencha touch开发推荐使用mvc结构，在这里我推荐以下结构

如图所示，我们一般在app文件夹中进行开发，其中config属于全局配置文件，是一个静态类

代码如下：

 1 //全局配置文件
 2 Ext.define('app.config', {
 3     //设置别名是为了方便调用，这样直接config.name就能获取到变量。
 4     alternateClassName: 'config',
 5     statics: {
 6         version: '1.0.0',
 7         used: {
 8             add: 'http://www.361y.cn:8080/Json/Used.asmx/Add',
 9             update: 'http://www.361y.cn:8080/Json/Used.asmx/Update',
10             destroy: 'http://www.361y.cn:8080/Json/Used.asmx/Delete',
11             list: 'http://www.361y.cn:8080/Json/Used.asmx/List',
12             one: 'http://www.361y.cn:8080/Json/Used.asmx/One'
13         }
14     }
15 });

如上所示，className的命名属于命名空间，此静态类的className是app.config，在这里表示app文件夹中的config.js文件。

为了方便调用，我们为他配置了alternateClassName属性。

我们在statics属性中配置全局变量，此类中我们只是配置了变量。

 

我们还可以在里面配置方法，不过为了方便维护，在另一个静态类中进行配置。

代码如下：

  1 //公用类
  2 Ext.define('app.util', {
  3     alternateClassName: 'util',
  4     statics: {
  5         //比较两个对象是否相等
  6         equals: function (x, y) {
  7             if (x === y) {
  8                 return true;
  9             }
 10             if (!(x instanceof Object) || !(y instanceof Object)) {
 11                 return false;
 12             }
 13             if (x.constructor !== y.constructor) {
 14                 return false;
 15             }
 16             for (var p in x) {
 17                 if (x.hasOwnProperty(p)) {
 18                     if (!y.hasOwnProperty(p)) {
 19                         return false;
 20                     }
 21                     if (x[p] === y[p]) {
 22                         continue;
 23                     }
 24                     if (typeof (x[p]) !== "object") {
 25                         return false;
 26                     }
 27                     if (!Object.equals(x[p], y[p])) {
 28                         return false;
 29                     }
 30                 }
 31             }
 32             for (p in y) {
 33                 if (y.hasOwnProperty(p) && !x.hasOwnProperty(p)) {
 34                     return false;
 35                 }
 36             }
 37             return true;
 38         },
 39         //重写ajax(需要初始化)
 40         overrideAjax: function () {
 41             var me = this;
 42             //开始加载
 43             Ext.Ajax.on('beforerequest',
 44             function (connection, options) {
 45                 if (!options.hidMessage) {
 46                     me.showMessage('正在努力加载中...');
 47                 }
 48             });
 49             //加载成功
 50             Ext.Ajax.on('requestcomplete',
 51             function (connection, options) {
 52                 me.hideMessage();
 53             });
 54             //加载失败
 55             Ext.Ajax.on('requestexception',
 56             function (connection, options) {
 57                 if (!options.hidMessage) {
 58                     me.showMessage('加载失败，请检查网络是否正常...', true);
 59                 }
 60             });
 61         },
 62         //重写list(需要初始化)
 63         overrideList: function () {
 64             //重写分页插件
 65             Ext.define("Ext.zh.plugin.ListPaging", {
 66                 override: "Ext.plugin.ListPaging",
 67                 config: {
 68                     //自动加载
 69                     autoPaging: true,
 70                     //滚动到最底部时是否自动加载下一页数据
 71                     noMoreRecordsText: '没有更多内容了',
 72                     loadMoreText: '加载更多...' //加载更多按钮显示内容
 73                 }
 74             });
 75             //重写下拉刷新
 76             Ext.define("Ext.zh.plugin.PullRefresh", {
 77                 override: "Ext.plugin.PullRefresh",
 78                 config: {
 79                     lastUpdatedText: '上次刷新时间：',
 80                     loadedText: '等一会再刷新吧...',
 81                     loadingText: '加载中...',
 82                     pullText: '下拉可以手动刷新',
 83                     releaseText: '松开可以刷新',
 84                     lastUpdatedDateFormat: 'Y-m-d H:i'
 85                 }
 86             });
 87             //重写List
 88             Ext.define("Ext.zh.List", {
 89                 override: "Ext.List",
 90                 config: {
 91                     //取消选择效果
 92                     selectedCls: '',
 93                     //禁用加载遮罩，防止跳转时页面卡顿，使用统一的遮罩效果
 94                     loadingText: false,
 95                     cls: 'list',
 96                     deferEmptyText: false,
 97                     emptyText: '没有更多内容了'
 98                 }
 99             });
100         },
101         //重写Pick相关(需要初始化)
102         overridePick: function () {
103             Ext.Date.monthNames = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
104             Ext.define("Ext.zh.DatePicker", {
105                 override: "Ext.picker.Date",
106                 config: {
107                     yearFrom: 2000,
108                     monthText: '月',
109                     dayText: '日',
110                     yearText: '年'
111                 }
112             });
113             Ext.define("Ext.local_zh_cn.Picker", {
114                 override: "Ext.picker.Picker",
115                 applyDoneButton: function (config) {
116                     if (config) {
117                         if (Ext.isBoolean(config)) {
118                             config = {};
119                         }
120                         if (typeof config == "string") {
121                             config = {
122                                 text: config
123                             };
124                         }
125                         Ext.applyIf(config, {
126                             ui: 'action',
127                             align: 'right',
128                             text: '确定'
129                         });
130                     }
131                     return Ext.factory(config, 'Ext.Button', this.getDoneButton());
132                 },
133                 applyCancelButton: function (config) {
134                     if (config) {
135                         if (Ext.isBoolean(config)) {
136                             config = {};
137                         }
138                         if (typeof config == "string") {
139                             config = {
140                                 text: config
141                             };
142                         }
143                         Ext.applyIf(config, {
144                             align: 'left',
145                             text: '取消'
146                         });
147                     }
148                     return Ext.factory(config, 'Ext.Button', this.getCancelButton());
149                 }
150 
151             });
152         },
153         //app初始化执行
154         inIt: function () {
155             this.overrideList();
156             this.overrideAjax();
157             this.addMessage();
158             this.overridePick();
159         }
160     }
161 });

如此我们可以通过util.equals('a','b')调用指定方法,另外我们可以通过this来进行内部调用

 

以上两个类不会自动创建，我们必须创建之后才能调用。一般我们在app.js中进行创建

代码如下：

 1 Ext.application({
 2     name: 'app',
 3     requires: ['app.config','app.util', 'Ext.MessageBox'],
 4     controllers: ['Main', 'Used', 'User', 'Job'],
 5     launch: function () {
 6         // Destroy the #appLoadingIndicator element
 7         Ext.fly('appLoadingIndicator').destroy();
 8         util.inIt();
 9         // Initialize the main view
10         Ext.Viewport.add(Ext.create('app.view.Main'));
11     }
12 });

在此代码中我们通过requires进行了创建。

值得注意的是，全局变量，公共方法不止以上一种写法，你可以自行尝试一下其他写法。

 

下面来说一说普通类，例如一个视图。

代码如下：

 1 Ext.define('app.view.About', {
 2     alternateClassName: 'about',
 3     extend: 'Ext.Container',
 4     xtype: 'about',
 5     requires: ['ux.plugin.ConHref'],
 6     config: {
 7         title: '关于我们',
 8         margin: 10,
 9         plugins: 'conHref',
10         html: '<p>“抛砖网”国内首家首创纯实战型培训机构，提供在线培训、技术指导及答疑！</p><br/><p>团队通过360全方位技术培训+1度手把手技术指导，保证每一个学员能最快掌握实际工作技能；</p><br/><p>让每一个学员都能站在我们的肩膀上，展翅高飞。赶快关注“抛砖网”。</p><br/><p>网址：<a href="http://www.361y.cn">www.361y.cn</a></p><p>QQ群：263271569</p><p>官方微信号：paozhuanedu</p><br/><p><strong>本期课程说明及付费链接：</strong></p><p><a href="http://item.taobao.com/item.htm?id=36768998716">item.taobao.com/item.htm?id=36768998716</a></p>'
11     }
12 });

 

这是一个视图类，所在路径为app/view/About.js

在这里设置alternateClassName是为了方便创建，我们可以通过Ext.create('about')来创建类，等同于Ext.create('app.view.About')

extend属性表示他继承于Ext.Container这个类。

xtype是为了方便在控制层中进行监听，通常此属性是必须的。

requires表示这个类所依赖的类，在这里是指一个插件。通过config.plugins来使用

config表示此类中的各种配置，框架自动帮每一个配置项添加了以下方法：

getter方法 - 如getName就是返回name的当前值。

setter方法 - 如getName就是为name设置一个新值。

getter和setter都是自动生成的，建议大家使用它们来存取类里面的数据。ST的每一个组件都使用了getter和setter的模式，这意味着如果我们知道一个配置项，也就知道如何获取和设置它的值了。

这也让你的的代码更整洁。

如果你需要在视图创建时就添加一个按钮，并且能够动态更新。

可以如下：

 1 /**
 2 * 基于Ext.navigation.Bar
 3 * 去除动画切换等功能
 4 * 可以灵活的在NavigationView子项中配置属性
 5 * 小写开头表示这是私有控件，不能直接使用
 6 */
 7 Ext.define('ux.navigationBar', {
 8     extend: 'Ext.TitleBar',
 9     requires: [
10         'Ext.Button',
11         'Ext.Spacer'
12     ],
13     config: {
14         /*导航栏标题*/
15         title: null,
16         /*item默认类型*/
17         defaultType: 'button',
18         layout: {
19             type: 'hbox'
20         },
21         /*返回按钮*/
22         backButton: {
23             align: 'left',
24             ui: 'back',
25             hidden: true
26         }
27     },
28     /*初始化配置*/
29     constructor: function (config) {
30         config = config || {};
31         if (!config.items) {
32             config.items = [];
33         }
34         this.callParent([config]);
35     },
36     /*创建返回按钮*/
37     applyBackButton: function (config) {
38         return Ext.factory(config, Ext.Button, this.getBackButton());
39     },
40     /*更新返回按钮*/
41     updateBackButton: function (newBackButton, oldBackButton) {
42         if (oldBackButton) {
43             this.remove(oldBackButton);
44         }
45         if (newBackButton) {
46             this.add(newBackButton);
47 
48             newBackButton.on({
49                 scope: this,
50                 tap: this.onBackButtonTap
51             });
52         }
53     },
54     /*点击返回按钮时触发*/
55     onBackButtonTap: function () {
56         this.fireEvent('back', this);
57     }
58 });

如上，applyBackButton方法在视图创建时会自动调用，只有返回的值部位false，并且不等于旧的值，就会自动触发updateBackButton方法，我们可以在里面进行逻辑处理。

 

另外一个类还值得主要的属性有：

alias ：类似于alternateClassName，但是它的值只能是string数组

inheritableStatics：可继承的静态方法列表

mixins ：额外需要继承的类

platformConfig：特殊平台或者主题中的默认配置

singleton：是否单例模式

uses ：不一定依赖的类