Tag Archives: sass

Sencha Touch v2 with style

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.