Adding ListGrid to SectionStack

[jerickson]

We were provided a JumpStart package that sets up a few custom screen classes using the methods below. It begins by setting up the component defaults then adding the components as part of the initWidget() procedure. We can successfully create the SectionStack and get it to display on the screen, however, we would like to add a ListGrid as an item to one of the sections and have been unable to do so. The snippet below shows just one example of the method we've been trying to use to make this work, but we have tried others with no success. The most common error that we get is that the ListGrid is not defined.

isc.ClassFactory.defineClass("BillingStatementsPanel", ScreenPanel).addProperties({
panelTitle: "Billing Statements",

formContainerDefaults: {
_constructor: isc.VLayout,
height: 1,
width: "100%",
border: "1px solid #CCCCCC",
padding: 10,
//margin: 5,
autoParent: "panelCanvas",
styleName: "formContainer"
},

myListGridDefaults: {
_constructor: isc.ListGrid,
width: "100%",
height: "250",
minHeight: "125",
margin: 5,
showResizeBar: true,
autoFitFieldWidths: true,
autoFitWidthApproach: "both",
showFilterEditor: true
},

historyStackDefaults: {
_constructor: isc.SectionStack,
autoParent: "formContainer",
visibilityMode: "multiple",
width: "100%",
height: 78,
sections: [
{title:"Bill History", expanded:false, items: [myListGrid] },
{title:"Batch History", expanded:false }
]
},

initWidget : function() {
this.Super("initWidget", arguments);
this.addAutoChild("myListGrid");
this.addAutoChild("historyStack");
}

});

My questions is, using the framework that was provided to us as part of our JumpStart package, how can we define a ListGrid and add it as an item to a section of a SectionStack?

Thanks,

Jason

[Isomorphic]

This code won't work as is because "myListGrid" is not quoted, so it's a plain JavaScript reference, and myListGrid is not defined as a global variable. If you quote it, the proper way to refer to an autoChild is to use the string "autoChild:myListGrid". Another way to do this is to simply make an addItem() call when you create the historyStack to add myListGrid (which would be referred to as this.myListGrid in initWidget.

[Isomorphic]

Here's a functional version of your code, assuming "ScreenPanel" is a defined class:

isc.ClassFactory.defineClass("BillingStatementsPanel", ScreenPanel).addProperties({
    panelTitle: "Billing Statements",

    formContainerDefaults: {
        _constructor: isc.VLayout,
        height: 1, autoDraw:true,
        width: "100%",height:500,
        border: "1px solid #CCCCCC",
        padding: 10,
        autoParent: "panelCanvas",
        styleName: "formContainer"
    },

    historyStackDefaults: {
        _constructor: isc.SectionStack,
        autoParent: "formContainer",
        visibilityMode: "multiple",
        width: "100%", height:"100%",

        myListGridDefaults: {
            _constructor: isc.ListGrid,
            width: "100%",
            height: "250",
            minHeight: "125",
            margin: 5,
            showResizeBar: true,
            autoFitFieldWidths: true,
            autoFitWidthApproach: "both",
            showFilterEditor: true
        },

        sections: [
            {title:"Bill History", expanded:false, items: ['autoChild:myListGrid'] },
            {title:"Batch History", expanded:false }
        ]
    },

    initWidget : function() {
        this.Super("initWidget", arguments);
        this.addAutoChild("formContainer");
        this.addAutoChild("historyStack");
    }

});

See the autochildren help topic for details on the approach taken above.

[jerickson]

This is exactly what I needed, thanks! I apologize that the original code was not functional -- the actual logic includes much more that wasn't relevant to the question so I tried to cut and paste just enough to make the trouble I was having clear.

Thanks again!