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.

tags: ,
posted in Software development by nohuhu

Follow comments via the RSS Feed | Leave a comment | Trackback URL

Leave Your Comment

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