Start Building Professional
Web Apps Today

layout, grid, autosize

I was looking for an example of the following:

1) have a layout assigned within the browser, and the layout will resize as the browser page resizes

2) display a grid within one of the panels within the layout, and as the layout resizes to autofill the browser window, then autosize and resize the grid to fill the resized layout window

>> 1) have a layout assigned within the browser, and the layout will resize as the browser page resizes
http://dhtmlx.com/docs/products/dhtmlxLayout/samples/init/fullscreen.html?un=1224079426000

>> 2) display a grid within one of the panels within the layout, and as the layout resizes to autofill the browser window, then autosize and resize the grid to fill the resized layout window
http://dhtmlx.com/docs/products/dhtmlxLayout/samples/components/grid.html?un=1224079496000

You can find more samples here: http://dhtmlx.com/docs/products/docsExplorer/index.shtml?type=smpl

I see how to attach the layout to the document.body, but I cant do that.  I need to be able to resize to the browser width, and resize to the height, minus some amount.  How can I do this?

Layout automaticaly occupied all body.

Be sure that you have the following style:

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    overflow: hidden;
}

and then create an instance of layout: var dhxLayout = new dhtmlXLayoutObject(document.body, ...);

I need the layout to occupy the whole body but I need it offset vertically down from the top since i have a header area at the very top that is not part of the layout.

Fullscreened layout does not support such functionality. You can use object init, frames, attach status bar to layout or use pattern with long horizontal cell at the needed side.