how will i use border layout in extjs

Question

I have following code i want that window opened uses Ext.layout.BorderLayout and also on the left side of the window has Ext.tree.TreePanel... I tried it but when I use BorderLayout the page does not open? Can anyone help me with this?

Ext.onReady(function() {
  var window = Ext.create('Ext.Window', {
    title: 'Hello',
    height: 100,
    width: 100
  });
  
  window.show();
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.min.js"></script>

Answer 1

Here's an official example showing a window with a BorderLayout. It's not enough just to add layout:'border' you have to add panels to the layout container and also configure the layout regions properly.

E.g.:

        var window = Ext.create('Ext.Window', {
            title: 'Hello',
            width: 100,
            height: 100,
            layout: 'border',
            items: [{
                region: 'west',
                title: 'Sidebar',
                width: 200,
                split: true,
                collapsible: true,
                floatable: false
            }, {
                region: 'center',
                html: 'Some content'
            }]
        });