This Post is the continuation of Create a Basic Form Post. If you haven’t read it, please read first. Today, We are going to see how to pass form data from view to controller using fireEvent().
Sencha Touch 2 application follows MVC architecture, so application logic needs to be added inside controller and only display logic and event attachment needs to be added inside views.
First, let’s add an Event listener to the ‘Save' button using listeners property.
listeners: [
{
fn: 'onSaveTap',
event: 'tap',
delegate: '#save'
}
]
When ‘Save' button is clicked, onSaveTap() function will be called with parameters - button Object, event Objects and options.
onSaveTap:function(button,e,options){
var me = this;
var formObj = Ext.ComponentQuery.query('formpanel')[0];
var formValues = formObj.getValues();
this.fireEvent('fireFormEvent',me,formValues);
}
Ext.ComponentQuery.query() is used to filter returned components using CSS based Selector. It returns an array of matched Components. Here, we have used xtype ‘FormPanel' as the selector. So formObj will contain a reference of FormPanel Component. getValues() will returns an object containing the value of each field in the form, keyed to the field’s name.
Now, fireEvent() is used to fire Custom Event ‘fireFormEvent' with parameters to the controller. We need to catch the fired Custom event 'fireFormEvent' in the controller using the below code
Defining the Controller Class
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
config: {
control: {
"FormPanel#registrationform": {
fireFormEvent: 'onFormPanelFireEvent'
}
}
},
onFormPanelFireEvent: function(formpanel, formValues) {
console.log(formValues);
}
});
Using control config property, we can attach events to the controller and associate that events to the FormPanel view component using itemId. Now, onFormPanelFireEvent() function will be invoked when controller catches the fired event ‘fireFormEvent’. formValues parameterwill have the form values.
Combining All Together:
Ext.define('MyApp.view.FormPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.FormPanel',
config: {
itemId: 'registrationform',
items: [
{
xtype: 'fieldset',
title: 'Registration Form',
items: [
{
xtype: 'textfield',
label: 'Username',
labelWrap: true,
name: 'username',
placeHolder: 'Enter Username'
},
{
xtype: 'textfield',
label: 'Password',
labelWrap: true,
name: 'password',
placeHolder: 'Enter Password'
},
{
xtype: 'emailfield',
label: 'Email',
labelWrap: true,
name: 'email',
placeHolder: '[email protected]'
},
{
xtype: 'urlfield',
label: 'Website',
labelWrap: true,
name: 'website',
placeHolder: 'http://example.com'
},
{
xtype: 'textareafield',
label: 'About You',
labelWrap: true,
name: 'aboutyou',
placeHolder: 'Tel me about yourself'
}
]
},
{
xtype: 'button',
itemId: 'save',
width: '30%',
text: 'Save'
}
],
listeners: [{
fn: 'onSaveTap',
event: 'tap',
delegate: '#save'
}
]
},
onSaveTap:function(button,e,options){
var me = this;
var formObj = Ext.ComponentQuery.query('formpanel')[0];
var formValues = formObj.getValues();
this.fireEvent('fireFormEvent',me,formValues);
}
});
—————————————————-
Posted By :
Manish Kumar Choithani
Senior /Lead Architect
Reference Email Ids:
[email protected]
[email protected]
[email protected]
[email protected]
Sencha Touch 2 application follows MVC architecture, so application logic needs to be added inside controller and only display logic and event attachment needs to be added inside views.
First, let’s add an Event listener to the ‘Save' button using listeners property.
listeners: [
{
fn: 'onSaveTap',
event: 'tap',
delegate: '#save'
}
]
When ‘Save' button is clicked, onSaveTap() function will be called with parameters - button Object, event Objects and options.
onSaveTap:function(button,e,options){
var me = this;
var formObj = Ext.ComponentQuery.query('formpanel')[0];
var formValues = formObj.getValues();
this.fireEvent('fireFormEvent',me,formValues);
}
Ext.ComponentQuery.query() is used to filter returned components using CSS based Selector. It returns an array of matched Components. Here, we have used xtype ‘FormPanel' as the selector. So formObj will contain a reference of FormPanel Component. getValues() will returns an object containing the value of each field in the form, keyed to the field’s name.
Now, fireEvent() is used to fire Custom Event ‘fireFormEvent' with parameters to the controller. We need to catch the fired Custom event 'fireFormEvent' in the controller using the below code
Defining the Controller Class
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
config: {
control: {
"FormPanel#registrationform": {
fireFormEvent: 'onFormPanelFireEvent'
}
}
},
onFormPanelFireEvent: function(formpanel, formValues) {
console.log(formValues);
}
});
Using control config property, we can attach events to the controller and associate that events to the FormPanel view component using itemId. Now, onFormPanelFireEvent() function will be invoked when controller catches the fired event ‘fireFormEvent’. formValues parameterwill have the form values.
Combining All Together:
Ext.define('MyApp.view.FormPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.FormPanel',
config: {
itemId: 'registrationform',
items: [
{
xtype: 'fieldset',
title: 'Registration Form',
items: [
{
xtype: 'textfield',
label: 'Username',
labelWrap: true,
name: 'username',
placeHolder: 'Enter Username'
},
{
xtype: 'textfield',
label: 'Password',
labelWrap: true,
name: 'password',
placeHolder: 'Enter Password'
},
{
xtype: 'emailfield',
label: 'Email',
labelWrap: true,
name: 'email',
placeHolder: '[email protected]'
},
{
xtype: 'urlfield',
label: 'Website',
labelWrap: true,
name: 'website',
placeHolder: 'http://example.com'
},
{
xtype: 'textareafield',
label: 'About You',
labelWrap: true,
name: 'aboutyou',
placeHolder: 'Tel me about yourself'
}
]
},
{
xtype: 'button',
itemId: 'save',
width: '30%',
text: 'Save'
}
],
listeners: [{
fn: 'onSaveTap',
event: 'tap',
delegate: '#save'
}
]
},
onSaveTap:function(button,e,options){
var me = this;
var formObj = Ext.ComponentQuery.query('formpanel')[0];
var formValues = formObj.getValues();
this.fireEvent('fireFormEvent',me,formValues);
}
});
—————————————————-
Posted By :
Manish Kumar Choithani
Senior /Lead Architect
Reference Email Ids:
[email protected]
[email protected]
[email protected]
[email protected]