Ext JS user extensions woes

June 26, 2012

A gem I’ve just found in Ext.ux.statusbar.StatusBar code: every setText() you call, it’s forcing full page reflow. Try this:

    setStatus : function(o) {
        var me = this;

        o = o || {};
//         Ext.suspendLayouts();
        if (Ext.isString(o)) {
            o = {text:o};
        }
        if (o.text !== undefined) {
            me.setText(o.text);
        }
        if (o.iconCls !== undefined) {
            me.setIcon(o.iconCls);
        }

        if (o.clear) {
            var c = o.clear,
                wait = me.autoClear,
                defaults = {
                    useDefaults: true,
                    anim: true
                };

            if (Ext.isObject(c)) {
                c = Ext.applyIf(c, defaults);
                if (c.wait) {
                    wait = c.wait;
                }
            } else if (Ext.isNumber(c)) {
                wait = c;
                c = defaults;
            } else if (Ext.isBoolean(c)) {
                c = defaults;
            }

            c.threadId = this.activeThreadId;
            Ext.defer(me.clearStatus, wait, me, [c]);
        }
//         Ext.resumeLayouts(true);
        return me;
    },

Comments are mine. And I’ve been wondering just why my application was sooo slow… Yes, it does a lot of statusbar updates. I bet yours does the same, otherwise what StatusBar is for…

But wait, there’s more. See that little method?

    setText : function(text) {
        var me = this;
        me.activeThreadId++;
        me.text = text || '';
        if (me.rendered) {
            me.statusEl.el.update(me.text);
//             me.statusEl.setText(me.text);
        }
        return me;
    },

Again, commented out is the old code, right above it is my fix. End result? StatusBar.setText() now takes about 2ms instead of 1.5 seconds, as measured on profiling machine (old Dell Inspiron 8400). Not bad for three lines of code changed…

I must admit I haven’t tested this fix heavily but then again, the code itself doesn’t make impression of having been tested at all. Works for me, YMMV.

Oh, and that’s for Ext JS 4.1.1RC2. Not sure if it will work for 4.0.

Automating JavaScript testing with Jasmine and Perl

June 21, 2012

Proxying DBI with DBD::Gofer and App::Staticperl

May 17, 2012

Developing Rich Internet Applications with Perl and JavaScript

April 19, 2012

 
Powered by Wordpress and MySQL. Theme by Shlomi Noach, openark.org