【发布时间】：2013-11-04 05:46:00
【问题描述】：
我创建了一个带有一个面板的视图，其中包含 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', { 扩展：'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
}
});
}
});'
【问题讨论】：
-
总是尝试把你的代码和你的问题放在一起，因为它很容易纠正你的问题
-
我不知道如何上传代码..第一次使用这个。
-
把你的代码放在评论中我会把它放在你的问题中
-
抱歉上传错误。我想将控制器引用到面板内的表单。
标签： javascript extjs sencha-architect