Dgrid Resizing within BorderContainer

http://stackoverflow.com/questions/13427937/dgrid-resizing-within-bordercontainer

by phusick

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<script src="https://cdn.rawgit.com/phusick/cdn/jsfiddle/amd-packages.js"></script>
<div
    style="height:100%;"
    data-dojo-type="dijit/layout/BorderContainer"
    data-dojo-props="gutters:true,liveSplitters:true"
>
    
    <div
        data-dojo-type="dijit/layout/ContentPane"
        data-dojo-props="region:'top',splitter:true" 
    >
        <button 
            data-dojo-type="dijit/form/Button"
            data-dojo-id="button"
        >
            grid.resize()
        </button>            
    </div>
    
    <div
        data-dojo-type="dijit/layout/ContentPane"
        data-dojo-props="region:'leading',splitter:true" 
    >leading</div>
    
    <div
        data-dojo-type="dijit/layout/ContentPane"
        data-dojo-props="region:'center'" 
    >
        <div id="grid"></div>
    </div>
    
    <div
        data-dojo-type="dijit/layout/ContentPane"
        data-dojo-props="region:'trailing',splitter:true" 
    >trailing</div>
    
    <div
        data-dojo-type="dijit/layout/ContentPane"
        data-dojo-props="region:'bottom',splitter:true" 
    >bottom</div>
    
</div>

CSS

html, body {
    height: 100%;
}

body {
    font-family: sans-serif;
    font-size: 11px;
}

#grid {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
}

JavaScript

require([
    "dojo/parser",
    "dojo/aspect",
    "dojo/store/Memory",
    "dgrid/OnDemandGrid",
    "data/dtuned",
    
    "dijit/layout/ContentPane",
    "dijit/layout/BorderContainer",
    "dijit/form/Button",
    
    "dojo/domReady!"
], function(
    parser,
    aspect,
    Memory,
    Grid,
    data
) {
    
    parser.parse().then(function() {
    
        var store = new Memory({ data: data });
        var grid = new Grid({
            store: store,
            columns: {
                Name: "Name",
                Year: "Year",
                Artist: "Artist",
                Album: "Album",
                Genre: "Genre"
            }
        }, "grid");         
        
        button.on("click", function() {
            grid.resize();
        });
        
        aspect.after(button, "resize", function() {
            console.log("button::resize()");            
        });
        
    });
    
});