vpolicy for hstack

Technical Q&A
1

Just a quick question with hstack’s “vpolicy”..does it apply at all? It’s in the documentation but does not work. See sample below.

isc.HStack.create({height: "100%", width:"100%", backgroundColor:"red",vPolicy:"fill",hPolicy:"fill",members:[isc.ListGrid.create({
    ID: "countryList",
    width:"50%", height:300, alternateRecordStyles:true,
    dataSource: worldDS,
    fields:[
        {name:"countryCode", title:"Code", width:50},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital"},
        {name:"continent", title:"Continent"}
    ],
    autoFetchData: true,
    showFilterEditor: true
})]});
2

Seems to be working, policy settings do not override explicitly set size (on either axis).

3

OH! Sorry didn’t realize that testcase had height in pixels.
I tried with height 50% and it still does not work..i’m expecting it to auto fill the rest of the space with the listgrid

isc.HStack.create({height: "100%", width:"100%", backgroundColor:"red",vPolicy:"fill",hPolicy:"fill",members:[isc.ListGrid.create({
    ID: "countryList",
    width:"50%", height:"50%", alternateRecordStyles:true,
    dataSource: worldDS,
    fields:[
        {name:"countryCode", title:"Code", width:50},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital"},
        {name:"continent", title:"Continent"}
    ],
    autoFetchData: true,
    showFilterEditor: true
})]});
4

Same with vstack and “hPolicy” - basically, I am expecting the same behaviour for when I set vstack’s vPolicy to “fill”..it actually expands the child to fill the rest of the vertical space even though the child says to take up 50% height

5

But there’s only one component involved. Your proposed behavior would make 50% equivalent of 100% equivalent to no setting. Instead there’s the useful behavior of filling a percentage of the space if you explicitly say to do so.

6

Ok. Kind of lost now. So what happens to the child with 50% in a vlayout and I set the vlayout’s vPolicy to "fill? Could you clarify? I was under the impression that “fill” meant the vlayout would expand the child to fit 100% of its available height because that is what I am seeing it is doing.

7

Likewise lost. To come at it another way, “fill” does fill as you can see by simply removing the setting for height entirely. So if you want filling just remove the setting.

It would be pointless for “fill” to override the height setting because that would lose features.

8

Well, my point is that vstack with vpolicy set to “fill” and its only child height is set to 50% DOES auto fill - I don’t need to remove the 50% height to gain this functionality as shown in the sample below. Now look at hPolicy specified as “fill” for vstack, yes you are right - if I remove the width property of 50% then I do gain this “fill” functionality but again I did not have to do this for the height property.

I am not saying it doesn’t work the way it should. I just want an explanation as to why the two properties behave differently.

VStack sample with vPolicy/hPolicy set to “fill” but only vPolicy is taken:

isc.VStack.create({height: "100%", width:"100%", backgroundColor:"red",vPolicy:"fill",hPolicy:"fill",members:[isc.ListGrid.create({
    ID: "countryList",
    width:"50%", height:"50%", alternateRecordStyles:true,
    dataSource: worldDS,
    fields:[
        {name:"countryCode", title:"Code", width:50},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital"},
        {name:"continent", title:"Continent"}
    ],
    autoFetchData: true,
    showFilterEditor: true
})]});

HStack sample with vPolicy/hPolicy set to “fill” but only hPolicy is taken:

isc.HStack.create({height: "100%", width:"100%", backgroundColor:"red",vPolicy:"fill",hPolicy:"fill",members:[isc.ListGrid.create({
    ID: "countryList",
    width:"50%", height:"50%", alternateRecordStyles:true,
    dataSource: worldDS,
    fields:[
        {name:"countryCode", title:"Code", width:50},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital"},
        {name:"continent", title:"Continent"}
    ],
    autoFetchData: true,
    showFilterEditor: true
})]});
9

The properties behave differently because there can be more than one widget on the length axis and only one on the breath axis.

10

Ok. That’s more clear now. Thanks.