I'm in the process of refactoring some code from my first Sencha Touch project. I followed a really great tutorial from
Miami Coder used to build a login page. There are a few things I wish it did better in terms of separating view and controller code, but you learn that stuff on the road.
One thing I really wish it covered was submitting the form using the Go key on iPhone, or Enter key. It's reliant on pressing the Log In button and then letting the code grab the values and move on. I want to make two changes. I want to listen for the Go key and submit the form, and I want the code to exist in the Controller, not the View.
First let's set up the View.
xtype: 'fieldset',
itemId: 'login-form',
name: 'login-form',
items: [
{
xtype: 'textfield',
placeHolder: 'Username',
itemId: 'user-name-text-field',
required: true,
autoComplete: false,
autoCorrect: false
},
{
xtype: 'passwordfield',
placeHolder: 'Password',
itemId: 'password-text-field',
required: true
}
]
},
{
xtype: 'button',
itemId: 'login-button',
action: 'login',
// This is just a color style
ui: 'action',
text: 'Log in',
cls: 'login-button'
}
Now let's set up the Controller.
config: {
control:{
// Listen for the login button
'button[action=login]':{
tap: 'tryLogin'
},
// Listen for a field form submit
'fieldset[name=login-form]':{
action: 'tryLogin'
}
}
}
I listen for events in the Controller instead of launching events through the Application from the View and listening for them elsewhere. The View is kept nice and clean and all the logic is in the Controller where it belongs. The Controller can grab a reference to the View and update whatever it needs.
'control' is my new favorite property. It's great for event listening. Once I found out I could tie a function to a button without listening for a command I never looked back.
