我创建了一个带有一个面板的视图，其中包含2个表单面板，即“welcome”和“contactus”。“welcome”包含一个按钮并包含一个“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'，{ extend：'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
}
});
}
}）;'
答案 0 :(得分：0)
您可以尝试从控制器中选择向上（）或向下（）。以下是源代码中的示例代码段。
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();
}