Announcement

**Isomorphic** · 31 Oct 2012, 05:44

Call reflowNow() after expandSection(). As with addMember(), expandSection() does not immediately do re-layout, in order to avoid running layout multiple times if you expand multiple sections or make other sizing changes.

**acarur01** · 31 Oct 2012, 06:22

What do I call reflowNow on? I tried calling on the vlayout as well as the section stack and it still doesn't work.

Code:

<HTML><HEAD><TITLE>Scroll to issues</TITLE>

    
</HEAD>


<body class="pageBackground" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" scroll="no" style="overflow:hidden">


<SCRIPT>var isomorphicDir = "isomorphic/"</SCRIPT>
    <SCRIPT>var isomorphicDir = "isomorphic/"</SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
	<SCRIPT SRC=isomorphic/skins/Enterprise/load_skin.js></SCRIPT>

<SCRIPT>
isc.HTMLFlow.create({
    ID: "htmlFlow",
    overflow: "auto",
    padding:10,
    contents: "<b>Severity 1</b> - Critical problem<br>System is unavailable in production or " +
              "is corrupting data, and the error severely impacts the user's operations." +
              "<br><br><b>Severity 2</b> - Major problem<br>An important function of the system " +
              "is not available in production, and the user's operations are restricted." +
              "<br><br><b>Severity 3</b> - Minor problem<br>Inability to use a function of the " +
              "system occurs, but it does not seriously affect the user's operations."
})


isc.SectionStack.create({
    ID: "sectionStack",
    visibilityMode: "multiple",overflow:"visible",
    width: 300, height: 900,top:700,left:300,
    border:"1px solid blue",
    sections: [
        {ID:"1",title: "Blue Pawn",  items: [
            isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_blue.png"})
        ]},
        {ID:"2",title: "HTMLFlow",  canCollapse: true, items: [ htmlFlow ]},
        {title: "Green Cube",  canCollapse: false, items: [
            isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/cube_green.png"})
        ]},
        {ID:"3",title: "Yellow Piece", items: [
            isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/piece_yellow.png"})
        ]},
      {ID:"4",title: "Blue Pawn",items: [
            isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_blue.png"})
        ]},
        {ID:"5",title: "HTMLFlow", canCollapse: true, items: [ htmlFlow ]},
        {ID:"7",title: "Green Cube", canCollapse: false, items: [
            isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/cube_green.png"})
        ]},
        {ID:"6",title: "Yellow Piece",  items: [
            isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/piece_yellow.png"})
        ]},      {ID:"8",title: "Blue Pawn",  items: [
            isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_blue.png"})
        ]},
        {ID:"9",title: "HTMLFlow", canCollapse: true, items: [ htmlFlow ]},
        {ID:"10",title: "Green Cube",  canCollapse: false, items: [
            isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/cube_green.png"})
        ]},
        {ID:"11",title: "Yellow Piece",  items: [
            isc.DynamicForm.create({fields:[{type:"text", name: "test1"}]})
        ]}
    ]
});
isc.VLayout.create({ID:"vLayoutTest",overflow:"scroll",autoDraw:true,width:900,height:"100%",
members:[isc.LayoutSpacer.create({height:700}),sectionStack]
});


isc.IButton.create({
    left: 325,
    width: 150,
    title: "Expand Blue",
    click: function(){
		var section = sectionStack.getSection('11');
		sectionStack.expandSection(section);
		//section.focus();
		section.items[0].setProperty('canFocus', true);
		//section.items[0].focus();
		vLayoutTest.reflowNow();
		var x = section.items[0].getOffsetX();
		var y = section.items[0].getOffsetY();
		y = y+section.items[0].height;
		Page.scrollTo(x,y);
	}
});

isc.IButton.create({
    left: 325,
    top: 30,
    width: 150,
    title: "Collapse Blue",
    click: "sectionStack.collapseSection(0)"
});

</script>
</BODY>
</html>

**Isomorphic** · 31 Oct 2012, 06:30

Call it on the sectionStack. But you'll need to fix your coordinate calculation as well - never do just ".height", call getHeight() or getVisibleHeight() (see docs for the distinction).

getOffsetX/Y are going to give you the mouse coordinate relative to the widget you called them on, they make no sense here.

You are probably looking for getPageTop().

**acarur01** · 31 Oct 2012, 09:10

Sorry, I still can't get this to work. I added getPageLeft/getPageTop and modified getHeight and it still does not scroll down.

Code:

click: function(){
var section = sectionStack.getSection('11');
sectionStack.expandSection(section);
section.items[0].setProperty('canFocus', true);
sectionStack.reflowNow();
var x = section.items[0].getPageLeft();
var y = section.items[0].getPageTop();
y = y+section.items[0].getHeight();
Page.scrollTo(x,y);
}

**Isomorphic** · 31 Oct 2012, 09:18

With the structure you've created, the page (as in, the browser as a whole) is not scrollable - there is no scrollbar. The element you could scroll is the VLayout you created with overflow:"scroll", and it scrolls fine, as expected.

**acarur01** · 31 Oct 2012, 09:23

Ah, I see ok thanks. Once I called vLayoutTest.scrollTo, it works now

Announcement

scrollTo section

Comment

Comment

Comment

Comment

Comment

Comment