TabContainer with dgrid

dgrid with TabContainer

by seo gyeongseok

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<div id='tc'></div>

CSS

#tc {
    width: 100%;
    height: 100%;    
}
.maxWidthHeight {
    width: 100%;
    height: 100%;
}
.borderContent {
    width: 50%;
    height: 100%;
    background-color: white;
}
html,body{ width: 100%; height: 100%; margin:0px;padding:0px; overflow: hidden;}

JavaScript

require({
    packages: [
    	{
        	name: 'dstore',
            location: '//cdn.rawgit.com/SitePen/dstore/v1.0.0'
        },
        {
            name: 'dgrid',
            location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
        },
        {
            name: 'xstyle',
            location: '//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
        },
        {
            name: 'put-selector',
            location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
        }
    ]
}, [
	'dstore/Memory',
    'dstore/Trackable',
    'dgrid/OnDemandGrid',
    'dgrid/Keyboard',
    'dgrid/Selection',
	'dojox/layout/ToggleSplitter',
	'dojo/_base/declare',
	'dijit/_WidgetsInTemplateMixin',
	'dijit/layout/TabContainer',
	'dijit/layout/ContentPane',
	'dijit/layout/BorderContainer'
], function (
	Memory,
    Trackable,
	OnDemandGrid,
    Keyboard,
    Selection,
	ToggleSplitter,
	declare,
    _WidgetsInTemplateMixin,
	TabContainer,
    ContentPane,
    BorderContainer
) {
 
	var CustomGrid = declare([OnDemandGrid, Keyboard, Selection], {
            selectionMode: 'single',
            cellNavigation: false
    });
        
	var MyTabContentWidget = declare([BorderContainer, _WidgetsInTemplateMixin], {
    	_spliterClass : ToggleSplitter,
        left: null,
        right: null,
        
    	postCreate: function() {
   			this.inherited(arguments);
            
            console.log('create Custom BorderContainer');
            
            var left = new ContentPane({
                class: 'borderContent',
                region:'left',
                splitter: false
            });
            var right = new ContentPane({
				class: 'borderContent',
                region:'center',
                splitter: true
            });
            
            this.addChild(left);
            this.addChild(right);
            
            this.left = left;
            this.right = right;
		}
    });

	var MyTabWidget = declare([TabContainer, _WidgetsInTemplateMixin], {
   ...