Composite controls - adding more elements to the grid

It is often necessary to add more elements to the grid, like action toolbar on top of the headers or paging controls in the bottom. The grid has Layout template defined but not used by default - it simply calls the next one (scrolling). However the Layout template can be used to split the control area (for example, with AW.Panels.Horizontal), put the grid in the middle and additional elements into the top/bottom areas.

var obj = new AW.UI.Grid;
    obj.setSize(800, 250);
    obj.setCellText(function(i, j){return j + "-" + i});
    obj.setHeaderText("header");

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

    obj.defineTemplate("topLine", function(){return "top"});
    obj.defineTemplate("bottomLine", function(){return "bottom"});

    obj.setLayoutTemplate(new AW.Panels.Horizontal);
    obj.setPanelTemplate(function(i){
        switch(i){
            case 0: return this.getTopLineTemplate();
            case 1: return this.getScrollTemplate();
            case 2: return this.getBottomLineTemplate();
        }
    });

    obj.setPanelHeight(30, 0); //top line
    obj.setPanelHeight(20, 2); //bottom line

    document.write(obj);

This is very good to know. I have a use for it already!

I often wondered what the purpose of the Layout template was - as you say it simply calls the Scroll Template !

Great Tip Alex.