Hi,
I have a 3T layout, and in the cell “b”, I want a 3E layout. In each cell, I have respectivly a grid, a tree and then a grid attached.
Now the 3T layout is initialized as a full screen layout, and when I resize the browser, I want each cell to resize accordingly.
Problem:
1- in all browsers (currently checked chrome and IE): the bottom cell of the 3E layout is open (and another one, it doesn’t matter). I resize the browser to be higher than then this cell, and the parent cell (the cell doesn’t appear anymore) and the parent cell doesn’t resize anymore, and I have to collapse the cells “a” and “b” to see the “c” cell
2- IE specific: when the issue stated above happens, and I collapse the cells to see the “c” cell, the grid does not appear anymore. I tried calling grid.setSizes() and layout.setSizes() on the parent layout resize event with no change.
The initialization codes:
[code]function initializeLayout() {
layout = new dhtmlXLayoutObject(document.body, “3T”, “dhx_skyblue”); //create a new layout object
layout.cells(“a”).setHeight(55);
layout.cells(“a”).hideHeader();
layout.cells(“b”).setWidth(250); //set the width of the left cell (with the tree)
var statusBar = layout.attachStatusBar(); //attach a status bar to the entire layout
statusBar.setText(“Release 1.0.0”); //to be changed
layout.cells(“a”).attachObject(“topDiv”);
layout.cells(“c”).hideHeader(); //hide the title of the right cell
layout.cells(“b”).setText(“Application Explorer”);
//Adjust the window size when the tree cell is collapsed
layout.attachEvent("onCollapse", function(itemId) {
if (itemId == "b") {
layout.setSizes();
}
})
//adjust the window size when the tree cell is expanded
layout.attachEvent("onExpand", function(itemId) {
if (itemId == "b") {
layout.setSizes();
}
});
layout.attachEvent("onResizeFinish", function() {
accordion.setSizes();
settingsGrid.setSizes();
});
}
[/code]
function initializeAccordion()
//initialize the accordion of the left side container
{
accordion = new dhtmlXLayoutObject(layout.cells("b"), "3E"); //create an accordion object attached to the left side layout cell
accordion.cells("a").setText("Dashboards");
accordion.cells("b").setText("Activities");
accordion.cells("c").setText("Settings");
accordion.cells("b").collapse();
accordion.cells("c").collapse();
// accordion.setSizes();
layout.cells("b").showHeader();
} function initializeSettingsGrid()
//Initialize the grid used as a settings menu
{
settingsGrid = accordion.cells("c").attachGrid(); //Create a new grid object, attached to the "settingsGrid" accordion cell
settingsGrid.setImagePath("Components/dhtmlx/dhtmlxGrid/codebase/imgs/"); //Set the grid icons folder of the grid
settingsGrid.setHeader("Image,Item"); //Set the header
settingsGrid.setNoHeader(true); //Don't show the header
settingsGrid.setInitWidths("25,*"); //Set the widthes of the columns
settingsGrid.setColTypes("img,ro"); //Set the column types to image and read only
settingsGrid.setIconPath("images/"); //Set the folder where our images are located
settingsGrid.setSkin("dhx_skyblue");
settingsGrid.enableAlterCss("", ""); //No alternate colors for the rows
settingsGrid.init(); //Initialize the grid
settingsGrid.loadXML("temp/settingsTree.xml"); //Populate the grid
settingsGrid.enableRowsHover(true, 'grid_hover'); //Enable rows highlighting on mouse over
settingsGrid.objBox.style.backgroundColor = "#FFFFFF";
settingsGrid.attachEvent("onRowSelect", function(id, ind) {
loadContent(settingsGrid.cells(id, 0).getAttribute("url"), settingsGrid.cells(id, 1).getValue(), settingsGrid.cells(id, 0).getAttribute("src"));
tree.clearSelection();
dashboardsGrid.clearSelection();
});
}If you need additional details I can e-mail you the entire page.
Thanks and regards,
Charbel Abdo
