3

我创建了一个带有一个面板的视图，其中包含 2 个表单面板，即“欢迎”和“联系我们”。“欢迎”包含一个按钮并包含一个“onclick”事件。按下该按钮应该隐藏“欢迎” ”表格，并应显示“联系我们”表格。我添加了一个控制器并在按钮上添加了事件。现在我的问题是如何从面板中选择单个表单以及如何在控制器中引用这些单个表单。控制器参考具有“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
        }
    });
}

});'

4

1 回答 1

0

您可以尝试从控制器中进行 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();

}
于 2015-08-05T03:33:02.020 回答