sencha touch 类的使用

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

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

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

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

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

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

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

代码如下：

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

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

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

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

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

代码如下：

 //公用类
 Ext.define('app.util', {
     alternateClassName: 'util',
     statics: {
         //比较两个对象是否相等
         equals: function (x, y) {
             if (x === y) {
                 return true;
             }
             if (!(x instanceof Object) || !(y instanceof Object)) {
                 return false;
             }
             if (x.constructor !== y.constructor) {
                 return false;
             }
             for (var p in x) {
                 if (x.hasOwnProperty(p)) {
                     if (!y.hasOwnProperty(p)) {
                         return false;
                     }
                     if (x[p] === y[p]) {
                         continue;
                     }
                     if (typeof (x[p]) !== "object") {
                         return false;
                     }
                     if (!Object.equals(x[p], y[p])) {
                         return false;
                     }
                 }
             }
             for (p in y) {
                 if (y.hasOwnProperty(p) && !x.hasOwnProperty(p)) {
                     return false;
                 }
             }
             return true;
         },
         //重写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: '加载更多...' //加载更多按钮显示内容
                 }
             });
             //重写下拉刷新
             Ext.define("Ext.zh.plugin.PullRefresh", {
                 override: "Ext.plugin.PullRefresh",
                 config: {
                     lastUpdatedText: '上次刷新时间：',
                     loadedText: '等一会再刷新吧...',
                     loadingText: '加载中...',
                     pullText: '下拉可以手动刷新',
                     releaseText: '松开可以刷新',
                     lastUpdatedDateFormat: 'Y-m-d H:i'
                 }
             });
             //重写List
             Ext.define("Ext.zh.List", {
                 override: "Ext.List",
                 config: {
                     //取消选择效果
                     selectedCls: '',
                     //禁用加载遮罩，防止跳转时页面卡顿，使用统一的遮罩效果
                     loadingText: false,
                     cls: 'list',
                     deferEmptyText: false,
                     emptyText: '没有更多内容了'
                 }
             });
         },
         //重写Pick相关(需要初始化)
         overridePick: function () {
             Ext.Date.monthNames = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
             Ext.define("Ext.zh.DatePicker", {
                 override: "Ext.picker.Date",
                 config: {
                     yearFrom: 2000,
                     monthText: '月',
                     dayText: '日',
                     yearText: '年'
                 }
             });
             Ext.define("Ext.local_zh_cn.Picker", {
                 override: "Ext.picker.Picker",
                 applyDoneButton: function (config) {
                     if (config) {
                         if (Ext.isBoolean(config)) {
                             config = {};
                         }
                         if (typeof config == "string") {
                             config = {
                                 text: config
                             };
                         }
                         Ext.applyIf(config, {
                             ui: 'action',
                             align: 'right',
                             text: '确定'
                         });
                     }
                     return Ext.factory(config, 'Ext.Button', this.getDoneButton());
                 },
                 applyCancelButton: function (config) {
                     if (config) {
                         if (Ext.isBoolean(config)) {
                             config = {};
                         }
                         if (typeof config == "string") {
                             config = {
                                 text: config
                             };
                         }
                         Ext.applyIf(config, {
                             align: 'left',
                             text: '取消'
                         });
                     }
                     return Ext.factory(config, 'Ext.Button', this.getCancelButton());
                 }

             });
         },
         //app初始化执行
         inIt: function () {
             this.overrideList();
             this.overrideAjax();
             this.addMessage();
             this.overridePick();
         }
     }
 });

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

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

代码如下：

 Ext.application({
     name: 'app',
     requires: ['app.config','app.util', 'Ext.MessageBox'],
     controllers: ['Main', 'Used', 'User', 'Job'],
     launch: function () {
         // Destroy the #appLoadingIndicator element
         Ext.fly('appLoadingIndicator').destroy();
         util.inIt();
         // Initialize the main view
         Ext.Viewport.add(Ext.create('app.view.Main'));
     }
 });

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

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

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

代码如下：

 Ext.define('app.view.About', {
     alternateClassName: 'about',
     extend: 'Ext.Container',
     xtype: 'about',
     requires: ['ux.plugin.ConHref'],
     config: {
         title: '关于我们',
         margin: 10,
         plugins: 'conHref',
         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>'
     }
 });

这是一个视图类，所在路径为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的模式，这意味着如果我们知道一个配置项，也就知道如何获取和设置它的值了。

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

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

可以如下：

 /**
 * 基于Ext.navigation.Bar
 * 去除动画切换等功能
 * 可以灵活的在NavigationView子项中配置属性
 * 小写开头表示这是私有控件，不能直接使用
 */
 Ext.define('ux.navigationBar', {
     extend: 'Ext.TitleBar',
     requires: [
         'Ext.Button',
         'Ext.Spacer'
     ],
     config: {
         /*导航栏标题*/
         title: null,
         /*item默认类型*/
         defaultType: 'button',
         layout: {
             type: 'hbox'
         },
         /*返回按钮*/
         backButton: {
             align: 'left',
             ui: 'back',
             hidden: true
         }
     },
     /*初始化配置*/
     constructor: function (config) {
         config = config || {};
         if (!config.items) {
             config.items = [];
         }
         this.callParent([config]);
     },
     /*创建返回按钮*/
     applyBackButton: function (config) {
         return Ext.factory(config, Ext.Button, this.getBackButton());
     },
     /*更新返回按钮*/
     updateBackButton: function (newBackButton, oldBackButton) {
         if (oldBackButton) {
             this.remove(oldBackButton);
         }
         if (newBackButton) {
             this.add(newBackButton);

             newBackButton.on({
                 scope: this,
                 tap: this.onBackButtonTap
             });
         }
     },
     /*点击返回按钮时触发*/
     onBackButtonTap: function () {
         this.fireEvent('back', this);
     }
 });

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

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

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

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

mixins ：额外需要继承的类

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

singleton：是否单例模式

uses ：不一定依赖的类