Tag Archives: ExtJS

Sencha Touch v2 with style

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.

Initial look at ExtJS 4

So… the graphing library look damn good, but focusing more on the nutts & bolts.

Previously ExtJS has had an on demand instantiation system vi anoymous objects with a property of xtype. It’s fairly likely that not every component of an ExtJS enhanced page is going to be used by a user or even looked at, so the xtype support allowed for avoiding costly and wasted object/component instantiations.

Now it looks like they’re taking that one step further. Looking at the Public Release 3 of ExtJS 4’s documentation, I noticed some new additions… specifically lazy class loading. If I’m correct in my assumptions, that means that instead of loading the ENTIRE ExtJS library and possibly only using a tiny bit of it, you can load up only what you need saving rendering time & bandwidth! 

Ext.require([
    'widget.window',
    'widget.button',
    'layout.fit'
]);

Ext.onReady(function() {
    var window = Ext.widget('window', {
        width: 500,
        height: 300,
        layout: 'fit',
        items: {
            xtype: 'button',
            text: 'Hello World',
            handler: function() { alert(this.text) }
        }
    });

    window.show();
});

Authoritative source here