/ext-4.1.0_b3/docs/extjs/examples/window/layout.js

 1Ext.require([
 2    'Ext.tab.*',
 3    'Ext.window.*',
 4    'Ext.tip.*',
 5    'Ext.layout.container.Border'
 6]);
 7Ext.onReady(function(){
 8    var win,
 9        button = Ext.get('show-btn');
10
11    button.on('click', function(){
12
13        if (!win) {
14            win = Ext.create('widget.window', {
15                title: 'Layout Window',
16                closable: true,
17                closeAction: 'hide',
18                width: 600,
19                minWidth: 350,
20                height: 350,
21                layout: {
22                    type: 'border',
23                    padding: 5
24                },
25                items: [{
26                    region: 'west',
27                    title: 'Navigation',
28                    width: 200,
29                    split: true,
30                    collapsible: true,
31                    floatable: false
32                }, {
33                    region: 'center',
34                    xtype: 'tabpanel',
35                    items: [{
36                        title: 'Bogus Tab',
37                        html: 'Hello world 1'
38                    }, {
39                        title: 'Another Tab',
40                        html: 'Hello world 2'
41                    }, {
42                        title: 'Closable Tab',
43                        html: 'Hello world 3',
44                        closable: true
45                    }]
46                }]
47            });
48        }
49        button.dom.disabled = true;
50        if (win.isVisible()) {
51            win.hide(this, function() {
52                button.dom.disabled = false;
53            });
54        } else {
55            win.show(this, function() {
56                button.dom.disabled = false;
57            });
58        }
59    });
60});