You wouldn’t write a HTML form like this:
So why the hell would you write a Sencha Touch form like
Ext.define("SoopaForm", {
config: {
style: "radius-border:12px; border: thin solid black; background-color: blue",
items: [
{
xtype: 'textfield',
name: 'username',
label: 'Username',
labelStyle: 'background: none !important; width: 45%',
style: 'background-color: white !important; border: thin solid white !important'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password',
labelStyle: 'background: none !important; width: 45%',
style: 'background-color: white !important; border: thin solid white !important'
},
{
xtype: 'button',
text: 'Submit',
action: 'submit'
}
]
}
});
ExtJS 4 AND Sencha Touch 2 come with a feature complete Sass/Compass sencha-touch css package ( just need to ruby gem install sass & compass ). From there, you can easily style your ExtJS4/Touch UI with some housekeeping similar to compass watch ( background polling compile on detection system ). You’re business logic will be cleaner, you styling will be more consistent, and more importantly it will make you totally look like a badass when you restyle an entire mobile app in minutes instead of days.