javascript - 如何将 Controller 引用到 Sencha Architect 中的 View ？

Question

我创建了一个带有一个面板的 View ，它包含 2 个表单面板，即“welcome”和“contactus”。“welcome”包含一个按钮并包含一个“onclick”事件。按下该按钮应该隐藏“欢迎”表格，并应显示“联系我们”表格。我添加了一个 Controller 并在按钮上添加了事件。现在我的问题是如何从面板中选择单独的表单以及如何在 Controller 中引用这些单独的表单。 Controller 引用有像“selector”、“xtype”和“ref”这样的字段。我需要帮助来填写这些字段。我会感谢帮助我的人:)

'/*

* 文件:app/view/contactus.js * * 此文件由 Sencha Architect 版本 2.2.2 生成。 * http://www.sencha.com/products/architect/ * * 此文件需要在独立许可下使用 Ext JS 4.2.x 库。 * Sencha Architect 的许可证不包括 Ext JS 4.2.x 的许可证。更多 * 详情见http://www.sencha.com/license或联系 license@sencha.com。 * * 每次保存项目时都会自动生成此文件。 * * 不要手动编辑此文件。 */

Ext.define('MyApp.view.contactus', {
extend: 'Ext.panel.Panel',
alias: 'widget.contactus',

height: 724,
width: 479,

initComponent: function() {
    var me = this;

    Ext.applyIf(me, {
        items: [
            {
                xtype: 'welcome',
                frame: true,
                height: 250,
                html: 'Thank you for visiting our site! We welcome your feedback;       itemId: 'welcomeid',
                width: 400,
                layout: {
                    align: 'middle',
                    type: 'hbox'
                },
                bodyPadding: 10,
                title: 'Welcome',
                dockedItems: [
                    {
                        xtype: 'toolbar',
                        flex: 1,
                        dock: 'top',
                        items: [
                            {
                                xtype: 'button',
                                itemId: 'contactusId',
                                margin: '0 0 50 50',
                                maxWidth: 70,
                                width: 70,
                                allowDepress: false,
                                preventDefault: false,
                                text: 'MyButton'
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'contactus',
                frame: true,
                height: 250,
                hidden: true,
                itemId: 'contactid',
                margin: '10 0 0 0',
                width: 400,
                bodyPadding: 10,
                title: 'Contact Us ',
                tools: [
                    {
                        xtype: 'tool'
                    }
                ],
                items: [
                    {
                        xtype: 'container',
                        layout: {
                            align: 'stretch',
                            type: 'hbox'
                        },
                        items: [
                            {
                                xtype: 'textfield',
                                flex: 1,
                                fieldLabel: 'Name',
                                labelWidth: 35,
                                allowBlank: false,
                                emptyText: 'FirstName'
                            },
                            {
                                xtype: 'textfield',
                                margin: '0 0 0 5',
                                width: 45,
                                fieldLabel: ''
                            },
                            {
                                xtype: 'textfield',
                                margin: '0 0 0 10',
                                width: 145,
                                allowBlank: false,
                                emptyText: 'LastName'
                            }
                        ]
                    },
                    {
                        xtype: 'textfield',
                        anchor: '100%',
                        padding: '10 0 0 0',
                        fieldLabel: 'Email',
                        labelWidth: 50,
                        allowBlank: false,
                        vtype: 'email',
                        vtypeText: 'Enter a valid email Id!!'
                    },
                    {
                        xtype: 'container',
                        items: [
                            {
                                xtype: 'toolbar',
                                id: '',
                                margin: '0 0 0 280',
                                items: [
                                    {
                                        xtype: 'button',
                                        itemId: 'saveId',
                                        text: 'Save'
                                    },
                                    {
                                        xtype: 'button',
                                        itemId: 'cancelId',
                                        text: 'Cancel'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    });

    me.callParent(arguments);
}

});

Ext.define('MyApp.controller.MyController', { 扩展:'Ext.app.Controller',

refs: [
    {
        autoCreate: true,
        ref: 'welcome',
        selector: 'welcome',
        xtype: ''
    },
    {
        ref: 'contactus',
        selector: 'contactus'
    }
],

onButtonClick: function(button, e, eOpts) {

    debugger;
    var form=this.getContactus();
    var form1=this.getWelcome();
    form.show();
    //debugger;
    //form1.setDisabled(true);
    //form1.disable(true);
    form1.hide();

},

onSaveButtonClick1: function(button, e, eOpts) {
    var form=this.getContactus();
    var form1=this.getWelcome();
    form.hide();
    form1.show();

},

init: function(application) {
    this.control({
        "button#contactusId": {
            click: this.onButtonClick
        },
        "button#saveId": {
            click: this.onSaveButtonClick1
        }
    });
}

});'

Answer 1

您可以尝试从您的 Controller 执行 up() 或 down() 选择。以下是您的源代码中的示例代码片段。

onButtonClick: function(button, e, eOpts) {

    debugger;
    var thisView = this.getView();
    var form= thisView.down('contactus');
    var form1=thisView.down('welcome');
    form.show();
    //debugger;
    //form1.setDisabled(true);
    //form1.disable(true);
    form1.hide();

}