2.5.1 Horizontal Panel bug ?

Hi Alex,

I was trying out the horizontal panels code you had mentioned some time ago (http://www.activewidgets.com/javascript.forum.20540.4/safari-and-opera-support-alpha.html) on the latest 2.5.1 version.
However, I ran into some problems.
Here's the code:

<html>
<head>
    <script src="runtime/lib/aw.js"></script>
    <link href="runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
<script>
var obj = new AW.Grid.Extended;
obj.setCellText(function(i, j){return j + "." + i});
obj.setHeaderText("header");

obj.setColumnCount(10);
obj.setRowCount(100);

obj.setCellEditable(true);

var toolbar = new AW.HTML.DIV;
toolbar.setId("toolbar");

toolbar.setContent("input", "text");

obj.defineTemplate("bottomLine", toolbar);

obj.setLayoutTemplate(new AW.Panels.Horizontal);
obj.setPanelTemplate(function(i){
    switch(i){
        case "center": return this.getScrollTemplate();
        case "bottom": return this.getBottomLineTemplate();
    }
});

obj.onPanelWidthChanged = function(width, panel){
    this.getLayoutTemplate().changePanelWidth(width, panel);
};

obj.onPanelHeightChanged = function(height, panel){
    this.getLayoutTemplate().changePanelHeight(height, panel);
};

obj.setPanelHeight(0, "top"); //top line
obj.setPanelHeight(23, "bottom"); //bottom line

document.write(obj);
</script>
</body>
</html>

I've added the line with the comment "top line" so that it displays properly.
Without this line which sets the top panel height to 0, a top panel is displayed with "undefined" in it.
Is there any better way to write the code so that it displays only the grid with a bottom panel and no top panel ?

Regards,
Ankur

Ankur Motreja

January 31,

Hi Ankur,
You just need to add a 'top' line so the panelTemplate returns the three possible panels.
Then, you can delete the line: obj.setPanelHeight(0, "top");
HTH

obj.setPanelTemplate(function(i){ 
    switch(i){ 
     case "top": return ''; /// or return this.getMyCustomTopTemplate(); 
     case "center": return this.getScrollTemplate(); 
     case "bottom": return this.getBottomLineTemplate(); 
    } 
});

Carlos

January 31,

Hi Carlos,

Thanks for the reply.
I tried adding the case statement and removing setPanelHeight, but it still leaves a gap at the top of the grid.
I was just wondering if there was a way to indicate that I don't need the top panel to be displayed.

Regards,
Ankur

Ankur Motreja

January 31,

By default the top section has 20px height and the bottom one is hidden, so you still need to set the size of both (i.e. 0 top and 23 bottom).

In AW 2.5 you can set the height directly on the template without linking to panelHeight properties -

var panel = new AW.Panels.Horizontal;
panel.changePanelHeight(0, "top");
panel.changePanelHeight(20, "bottom");

and the complete code would look like

var obj = new AW.Grid.Extended;
obj.setCellText(function(i, j){return j + "." + i});
obj.setHeaderText("header");

obj.setColumnCount(10);
obj.setRowCount(100);

obj.setCellEditable(true);

var toolbar = new AW.HTML.DIV;
toolbar.setId("toolbar");

toolbar.setContent("input", "text");

obj.defineTemplate("bottomLine", toolbar);

var panel = new AW.Panels.Horizontal;
panel.changePanelHeight(0, "top");
panel.changePanelHeight(20, "bottom");

obj.setLayoutTemplate(panel);

obj.setPanelTemplate(function(i){
    switch(i){
        case "center": return this.getScrollTemplate();
        case "bottom": return this.getBottomLineTemplate();
    }
});

document.write(obj);

Alex (ActiveWidgets)

January 31,

This topic is archived.

2.5.1 Horizontal Panel bug ?

See also:

Search

New Data Grid

Version 2