You wouldn’t write a HTML form like this:
<form style="radius-border:12px; border: thin solid black; background-color: blue"> <label style="background: none !important; width: 45%" >Username</label> <input style="background-color: white !important; border: thin solid white !important" name="username"/><br/> <label style="background: none !important; width: 45%">Password</label> <input style="background-color: white !important; border: thin solid white !important" type="password" name="password"/><br/> <input type="submit"/> </form> |
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.