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 ：不一定依赖的类