navigationview的理解

最新推荐文章于 2025-03-07 11:10:21 发布

weixin_30482383

最新推荐文章于 2025-03-07 11:10:21 发布

阅读量185

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发测试 ui

原文链接：http://www.cnblogs.com/qingkong/archive/2013/01/28/2880421.html

本文详细介绍了如何在Sencha Touch应用中实现代理引用和事件绑定，通过实例展示了如何使用xtype引用、id引用、事件监听等技术来优化应用交互体验。

  xtype: 'mainview',

    config: {
        //如果设置为自动销毁，那么原来绑定的事件会消失，不会重新绑定
        autoDestroy: false,

        navigationBar: {
            ui: 'sencha',
            items: [
                {
                    xtype: 'button',
                    id: 'editButton',
                    text: 'Edit',
                    //控制按钮在最右侧
                    align: 'right',
                    hidden: true,
                    //在android上按钮消失的官方方法
                    hideAnimation: Ext.os.is.Android ? false : {
                        type: 'fadeOut',
                        duration: 200
                    },
                     //在android上按钮出现的官方方法
                    showAnimation: Ext.os.is.Android ? false : {
                        type: 'fadeIn',
                        duration: 200
                    }
                },

//这是一个很常用的sencha的mvc用法
Ext.define('AddressBook.controller.Application', {
    extend: 'Ext.app.Controller',

    config: {
     //定义别名替代引用，就是用一个字符串替代应用程序上控件的名字
        refs: {
            //xtype引用，就是使用xtype寻找，导航面板用main代替
            main: 'mainview',
             //id引用，就是使用id寻找
            editButton: '#editButton',
            contacts: 'contacts',
            showContact: 'contact-show',
            editContact: 'contact-edit',
            saveButton: '#saveButton'
        },

        control: {
           //事件绑定，,对导航面板的push和pop触发时的引用
            main: {
                push: 'onMainPush',
                pop: 'onMainPop'
            },
            editButton: {
                tap: 'onContactEdit'
            },
           //list列表选项事件绑定
            contacts: {
                itemtap: 'onContactSelect'
            },
            saveButton: {
                tap: 'onContactSave'
            },
            //文本框改变事绑定
            editContact: {
                change: 'onContactChange'
            }
        }
    },

    onMainPush: function(view, item) {
        var editButton = this.getEditButton();

        if (item.xtype == "contact-show") {
            this.getContacts().deselectAll();

            this.showEditButton();
        } else {
            this.hideEditButton();
        }
    },

    onMainPop: function(view, item) {
        if (item.xtype == "contact-edit") {
            this.showEditButton();
        } else {
            this.hideEditButton();
        }
    },

    onContactSelect: function(list, index, node, record) {
        var editButton = this.getEditButton();
        //实例化展示面板，然后加入导航面板中
        if (!this.showContact) {
            this.showContact = Ext.create('AddressBook.view.contact.Show');
        }

        // Bind the record onto the show contact view
        this.showContact.setRecord(record);

        // Push the show contact view into the navigation view
        //导入导航面板中的方法
        this.getMain().push(this.showContact);
    },

    onContactEdit: function() {
        if (!this.editContact) {
            this.editContact = Ext.create('AddressBook.view.contact.Edit');
        }

        // Bind the record onto the edit contact view
        this.editContact.setRecord(this.getShowContact().getRecord());

        this.getMain().push(this.editContact);
    },

    onContactChange: function() {
        this.showSaveButton();
    },

    onContactSave: function() {
        var record = this.getEditContact().saveRecord();

        this.getShowContact().updateRecord(record);
        //导航面板中返回上层的方法
        this.getMain().pop();
    },

    showEditButton: function() {
        //组件在控制器中寻找的方法，用get+大写字母开头的替代名
        var editButton = this.getEditButton();

        if (!editButton.isHidden()) {
            return;
        }

        this.hideSaveButton();

        editButton.show();
    },

    hideEditButton: function() {
        var editButton = this.getEditButton();

        if (editButton.isHidden()) {
            return;
        }

        editButton.hide();
    },

    showSaveButton: function() {
        var saveButton = this.getSaveButton();

        if (!saveButton.isHidden()) {
            return;
        }

        saveButton.show();
    },

    hideSaveButton: function() {
        var saveButton = this.getSaveButton();

        if (saveButton.isHidden()) {
            return;
        }

        saveButton.hide();
    }
});

 //listeners一般在config中，一般处理事件的监听和绑定，
//这则例子是对'textfield'的委托，'onKeyUp'的监听和绑定
 listeners: {
            delegate: 'textfield',
            keyup: 'onKeyUp'
        },
//还有例外一种写法
 {
                fn: 'onKeyUp',
                event: 'keyup',
                delegate: 'textfield'
            },

 //一般所有的组件中都有fireEvent这个方法，方便立即触发所有的事件监听
onKeyUp: function() {
        this.fireEvent('change', this);
    }

转载于:https://www.cnblogs.com/qingkong/archive/2013/01/28/2880421.html