What is the proper approach for defining multi-instance widgets?

[topr]

Hi,

I defined widget class which is instantiated multiple times across different tabs of TabSet.

If more then one tab is open with the mentioned widget then layout issues will occur. Basically widget renders only inside of one tab and should inside of each.
After closing all tabs and reopen at least one still no widget rendered at all. Sometimes also JavaScript 'this.form is null' error appears.

Here is the sample code:

    ClassFactory.defineClass('TestPane', HLayout);

    TestPane.addProperties({
        width:740,
        height:130,
        layoutTopMargin:20,
        layoutBottomMargin:10,
        membersMargin:30,
        defaultLayoutAlign:'center',
        border:"1px dashed grey",
        members:[
            DynamicForm.create({
                width:160,
                numCols:2,
                colWidths:[130, 20],
                cellPadding:5,
                fields:[
                    { title:'Left for decision', canEdit:false, value:71 },
                    { title:'Printed', canEdit:false, value:997 },
                    { title:'Canceled', canEdit:false, value:89 }
                ]
            }),
            Button.create({title:'Accept', click:function() {
                isc.say('hello!')
            }}),
            VLayout.create({
                width:300,
                members:[
                    Label.create({
                        height:40,
                        width: 380,
                        align:'center',
                        contents:'Accepting in progress'
                    }),
                    HLayout.create({
                        membersMargin:10,
                        members:[
                            Label.create({
                                width:30,
                                height:20,
                                contents:'87%'
                            }),
                            Progressbar.create({
                                height:20,
                                width:300,
                                breadth:20,
                                percentDone:87
                            }),
                            Label.create({
                                width:60,
                                height:20,
                                contents:'997 / 1086'
                            })
                        ]
                    }),
                    Label.create({
                        height:30,
                        width: 380,
                        align:'center',
                        contents:'Started at 13:25 by user: john'
                    })
                ]
            })
        ]
    });

    var tabSet = TabSet.create({
        width: 800,
        height: 300,
        tabs:[
            {
                title:'button tab',
                pane:VLayout.create({
                    members:[
                        Button.create({
                            title:'open test tab',
                            click:function() {
                                tabSet.addTab({
                                    title:'test tab',
                                    canClose:true,
                                    pane:TestPane.create({})
                                })
                            }
                        })
                    ]
                })
            }
        ]
    });

    tabSet.draw();

No matter if I use fields or defaultFields property for embedded DynamicForm (despites there are no fields rendered with defaultFields as there is no dataSource specified - but still buggy).

If I replace the line
pane:TestPane.create({})
with
pane:HLayout.create({/* all code from TestPane.addProperties here */})
then all works fine.
I can also override initWidget method in which I'm adding members then. But I think above code sample should work too, shouldn't it?

The main question is: what is the proper approach when one needs the reusable widget code extracted as a separate class?

SmartClient Version: 8.0/PowerEdition Development Only (built 2011-01-21)

[davidj6]

Defer creation of the members and any other contained objects until init() is called. Otherwise, the instances are created during class definition which is not what you want.

[topr]

Thanks,

So the approach with overriding initWidget() method is the proper one, yes?

[davidj6]

A more elegant solution is to use the autoChildren feature of SC but doing this manually in init() or initWidget() will work fine.

[topr]

OK, thank you.
I'll look into this feature more carefully.