I have created a view with one panel and it contains 2 form panel inside it namely "welcome" and "contactus"."welcome" contains a button and includes a "onclick" event.pressing on that button is supposed to hide the "welcome" form and should display the "contactus" form. i added a controller and added event on the buttons.now my problem is that how to select individual forms from the panel and how to reference these individual forms in controller. controller reference have fields like "selector", "xtype" and "ref". I need help to fill these fields.I will b thankful to the person who helps me :)
'/*
* File: app/view/contactus.js * * This file was generated by Sencha Architect version 2.2.2. * http://www.sencha.com/products/architect/ * * This file requires use of the Ext JS 4.2.x library, under independent license. * License of Sencha Architect does not include license for Ext JS 4.2.x. For more * details see http://www.sencha.com/license or contact [email protected]. * * This file will be auto-generated each and everytime you save your project. * * Do NOT hand edit this file. */
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
}
});
}
});'
