I'm developing a mobile app using Sencha Touch. The problem is my button not switch to new view after I tap it.
My code:
view/LoginUsername.js
Ext.define('RibMobile.view.LoginUsername', {
extend: 'Ext.form.Panel',
xtype: 'loginusernamepage',
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label',
'Ext.Img'
],
config: {
title: 'Login',
items: [{
/* ? */
}, {
xtype: 'button',
itemId: 'nextButton',
ui: 'action',
padding: '10px',
text: 'Next'
}, {
/* ? */
}]
}
});
controller/Login.js
Ext.define('RibMobile.controller.Login', {
extend: 'Ext.app.Controller',
config: {
refs: {},
control: {
nextButton: {
// On the tap event, call onNewTap
tap: 'onPasswordTap'
}
}
},
//called when the Application is launched, remove if not needed
launch: function(app) {},
onPasswordTap: function() {
// When the user taps on the button, create a new reference of our New view, and set it as the active
// item of Ext.Viewport
Ext.Viewport.setActiveItem(Ext.create('RibMobile.view.LoginPassword'));
}
});
app.js
Ext.application({
name: 'RibMobile',
requires: [
'Ext.MessageBox'
],
controllers: [ 'Main', 'Login' ],
views: [
'Contact',
'Locate',
'LoginUsername',
'LoginPassword',
'Main',
'Promotion'
],
/* ? */
How can I trigger the button?
You miss the mapping between your button and its control.
Add a reference to it and it should work:
refs: {
nextButton: 'button[itemId=nextButton]'
}