Extjs repaint component lag

Question

I have a border layout in ExtJS where there is a north panel which, in turn, has several panels nested in it.

The "parent" north panel is collapsible and has a splitter. The problem is, whenever I move the splitter, the other panels are repainted too late.

Example: if my panel is 300px and I resize it to 320px, my panels remain 300px. If i resize again to, say, 350px, the panels get resized to 320px.

The parent panel's layout mode is set to "auto" by default.

When I set the layout mode of the parent panel to "vbox", the other panels resize appropriately in width. However, these child-panels are expandable/collapsible as well, and with the vbox layout I can no longer expand them fluently.

Anyone have a clue what's going on/how to fix the lag?

Edit: after further investigation, it appears to only affect the headers of the panels, not the panels themselves.

You didn't post any code, so it's not really possible to say. — Evan Trimboli, Apr 24 '13 at 23:53

score 0 · Answer 1 · answered Apr 24 '13 at 20:51

I fixed it (for now) by adding the following to the parent panel, even though it's laggy...

listeners: {
    resize: function() {
        Ext.each(this.items.items, function(child){
            var w = child.getWidth();
            child.getHeader().setWidth(w);
        });
    } 
}

Extjs repaint component lag

1 Answers1