Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Adding multiple buttons to a section stack

    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 with a ListGrid and get it to display on the screen, however, we would like to adding a button in addition, shown as an item to one of the sections. The snippet below shows just one example of the method we've been trying to use to make this work, but still running into problems. (I apologize for the mess snippet just thought to put what was important). Please let me know if more detail is needed.


    /// <reference path="../isomorphic/system/development/smartclient.d.ts"/>
    isc.ClassFactory.defineClass("ReinsurersPanel", ScreenPanel).addProperties({
    panelTitle: "Reinsurers",
    dataSource: "rscReacctBillingStatements",

    myListGridDefaults: {
    _constructor: isc.ListGrid,
    width: "100%",
    height: "300",
    minHeight: "125",
    margin: 5,
    showResizeBar: true,
    autoParent: "panelCanvas",
    autoFitFieldWidths: true,
    autoFitWidthApproach: "both",
    showFilterEditor: true,
    recordClick : function() {
    this.panel.rowChanged();
    }
    },
    },
    editStackDefaults: {
    _constructor: isc.SectionStack,
    autoParent: "formContainer",
    visibilityMode: "multiple",
    width: "100%",
    height: 1,
    overflow: "visible",
    expandSection: function () {
    this.Super("expandSection", arguments);
    this.panel.rowChanged();
    },


    companyGridDefaults: {
    _constructor: isc.DynamicForm,
    width: "100%",
    height: "250",
    margin: 5,
    showFilterEditor: false,
    dataSource: "rscReacctBanks"
    },
    billingInformationGridDefaults: {
    _constructor: isc.DynamicForm,
    width: "100%",
    height: "250",
    margin: 5,
    showFilterEditor: false,
    dataSource: "rscReacctBanks"
    },
    ratingHistoryGridDefaults: {
    _constructor: isc.ListGrid,
    width: "100%",
    height: "250",
    margin: 5,
    showFilterEditor: false,
    dataSource: "rscReacctBillingBatchHistory"
    },



    //Attempting to button a button in section stack
    ratingHistoryControlButtonLayoutDefaults: {
    _constructor: isc.HStack,
    width: "100%",
    height: 30,
    membersMargin: 5,
    //autoParent: "panelCanvas",
    margin: 10
    },
    ratingHistoryControlButtonLayoutSpacerDefaults: {
    _constructor: isc.LayoutSpacer,
    //autoParent: "ratingHistoryControlButtonLayout",
    width: 0
    },
    ratingHistoryNewButtonDefaults: {
    _constructor: isc.Button,
    autoParent: "ratingHistoryControlButtonLayout",
    width: 85,
    height: 25,
    title: "New"
    /*click : function() {
    this.panel.toggleNewClicked();
    }*/
    },


    sections: [
    {title:"Company", expanded:true, items: ['autoChild:companyGrid'] },
    {title:"Billing Information", expanded:false, items: ['autoChild:billingInformationGrid'] },
    {title:"Rating History", expanded:false, items: ['autoChild:ratingHistoryGrid','autoChild:ratingHistoryControlButtonLayout']},
    ]
    },


    initWidget : function() {
    this.Super("initWidget", arguments);
    this.addAutoChild("myListGrid", {panel: this});
    this.addAutoChild("controlButtonLayout");
    this.addAutoChild("formContainer");
    this.addMember(isc.LayoutSpacer.create({height: "*"}));
    this.addAutoChild("controlButtonLayoutSpacer", {panel: this});
    this.addAutoChild("reinsurerDetailForm", {panel: this});
    this.addAutoChild("editStack", {panel: this});

    #2
    So far you have references to the ratingHistoryControlButtonLayout but no reference to either of it's children (the spacer or actual button), so nothing is creating them. You need addAutoChild() calls for those components.

    Comment


      #3
      Works! However the buttons are now stacking on top of each other... What exactly should I change to make it side by side?

      Comment


        #4
        Which buttons? We would find it odd if members of an HStack were stacking vertically. Are you including "ratingHistoryControlButtonLayoutSpacer" as a button? If so, it looks like you've left autoParent commented out so it's not being added as a member of "ratingHistoryControlButtonLayout".

        Comment


          #5
          Seems like even I i put the autoParent back in it is still stacking for some reason.

          Comment


            #6
            There are a number of problems with the sample code above. First, when you create an autochild with addAutoChild(), you should do it via a call on the canvas where the corresponding defaults have been defined. For the "ratingHistoryNewButton" autoChild, for example, you define the defaults in the editStack autoChild, so you must call addAutoChild() on editStack rather than on the outer widget to construct the buttons as you seem to be doing at the bottom of the sample code.

            The other problem is that the "ratingHistoryControlButtonLayout" autoChild defined off the editStack is created lazily via the declaration: "autoChild:ratingHistoryControlButtonLayout'", so you need to make sure that autochildren you want inserted as members are inserted after the layout exists. One way would be to add them in an override of the layout's draw method. So, something like:

            Code:
            ratingHistoryControlButtonLayoutDefaults: {
                _constructor: isc.HStack,
            
                //  ... other declarations
            
                draw : function () {
                    this.Super("draw", arguments);
                    var stack = this.getParentCanvas();
                    stack.addAutoChild("controlButtonLayoutSpacer");
                    stack.addAutoChild("ratingHistoryNewButton");
                }   
            }

            Comment

            Working...
            X