Old CanvasItems influences size of DynamicForm

[pvojtechovsky]

I have a DynamicForm which contains CanvasItems.
I am changing content of this DynamicForm by call of DynamicForm.setFields(...).
The DynamicForm has wrong size after setFields is called.

Analyze of problem:
The size of DynamicForm is influenced by sizes of CanvasItems, which were present in the DynamicForm before setFields method was called.
It is so, because during call of DynamicForm.adjustOverflow the DOM of DynamicForm contains HTML of old CanvasItems.
The old CanvasItems are removed from DOM later (too late...) by call of destroyOrphanedItems()

Here is the sample code, which reproduces the bug on SC 8.3:

isc.ClassFactory.defineClass("ListGridItem", "CanvasItem");isc.ListGridItem.addProperties({
 autoDestroy : true,
 showTitle : false,
    createCanvas : function () {
        return isc.Canvas.create({
            autoDraw:false,
            backgroundColor : "yellow",
            width:300, height:300,
             contents : "content..."
            });
    }
 });

fields1 = [{name:"countryName",type:"ListGridItem"}];
fields2 = [{name:"countryName",type:"ListGridItem"},{name:"countryName2",type:"ListGridItem"}];

isc.DynamicForm.create({
  //uncomment this workaround to fix this SC bug: 
    /*
   adjustOverflow : function() {
    this.destroyOrphanedItems();
    this.Super("adjustOverflow", arguments);
   },*/
   ID: "exampleForm", autoDraw:false,
   width: 1, height: 1, overflow: "visible",
   border:"2px solid blue", padding:5, canDragResize:true,
   fields:fields2
});
isc.Button.create({
ID : "b1",autoDraw:false,
   title: "Use fields1",
   click: function () {
      exampleForm.setFields(fields1.duplicate());
   }
});
isc.Button.create({
ID : "b2",autoDraw:false,
   title: "Use fields2",
   click: function () {
     exampleForm.setFields(fields2.duplicate());
   }
});
isc.VLayout.create({
members : [b1,b2,exampleForm]
})

And here is the Test case:
1) copy sample code into SC feature explorer. E.g. http://www.smartclient.com/#_Featured.Samples_Hello.World
You can see there 2 yellow rectangles (2 CanvasItems) with blue border (DynamicForm)
2) press button [Use fields1]
One yellow rectangle is removed - OK
But the blue border is not changed! - BUG: DynamicForm has wrong size
3) press button [Use fields1] again
now the DynamicForm finally used correct size

you can optionally use button [Use fields2] to reproduce the problem again.

The example contains a workaround too. Remove comment of "adjustOverflow" function and try the test case again. It works now as expected.

Note the the solution:
I suggest to call destroyOrphanedItems immediately before adjustOverflow is processed. If it is done sooner, e.g. during DynamicForm.removeItems then browser changes DynamicForm GUI with a not nice "blink".

I was able to reproduce this problem on all 8.3 versions (I have not tested on other versions).
It is reproducable on FireFox 17.0.5 ESR and MS IE 9, but it is not browser specific problem.

[Isomorphic]

We're not seeing this bug. Can you try against the latest nightly build and confirm whether it's still being a problem for you?

Thanks
Isomorphic Software