[Solved,sorta]Dynamic add/remove of panels from a table layout, 2nd add doesn't work?

[jeffadams78]

We're trying to dynamically add and remove panels from a panel with a 'table' layout:

var dataPanelNum = 0;

function resourceIdentifyCallback(jsonStr) {
        if (panelWithTableLayout.items) {
            // start at the end and work forward, in case the length is actually
            // updated as the items are removed (although this didn't seem to be the case)
            for (var itemNum = dataPanelNum; itemNum > 0; itemNum--) {
                panelWithTableLayout.remove('dataPanel'+itemNum, true);
            }
            dataPanelNum = 0;
        }
        
        var dataArray =  Ext.util.JSON.decode(jsonStr);
        for (var i = 0; i < dataArray .length; i++) {
            var oneDatum = dataArray [i];
            // Creates a Panel with an id of 'dataPanel' + dataPanelNum++
            var newPanel= createDataPanel(oneDatum );
            panelWithTableLayout.add(newPanel);
        }

        panelWithTableLayout.doLayout();
}

The problem is, the code only works the on the first add. The first time that function is called, it adds and displays the new panels. The second time it is called, it removes all the panels (verified they are gone from the DOM using firebug) but even though it steps through the add logic correctly (again, verified using firebug) the DOM doesn't get updated.

Any thoughts? Thanks.

[jeffadams78]

Well, the only way we could find to fix it was to have a new outer containing panel, with layout 'fit', to hold the panel with the table layout.

Then we remove the table layout panel from the fit layout panel, construct a new table layout panel, add all the stuff we want to that, and add the new table layout panel to the fit layout panel.

Apparently the 'table' layout doesn't handle dynamic changes well.