how will i use border layout in extjs

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" r开发者_Go百科el="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>

---

Some addition to bmoeskau's answer. I recomend you to not use JavaScript reserved words like window, document, number etc.

---

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'
            }]
        });

---

Simply give your window a border layout and set the regions for the immediate children. Each child will have its own layout and child items.

Ext.onReady(function() {
  var treeStore = Ext.create('Ext.data.TreeStore', {
    root: {
      expanded: true,
      children: [{
        text: "Wake up",
        leaf: true
      }, {
        text: "Go to Work",
        expanded: true,
        children: [{
          text: "Eat Lunch",
          leaf: true
        }, {
          text: "Finish Report",
          leaf: true
        }]
      }, {
        text: "Go to Sleep",
        leaf: true
      }]
    }
  });

  var myWindow = Ext.create('Ext.Window', {
    title: 'Hello World',
    width: 480,
    height: 220,
    layout: 'border',
    items: [{
      layout: 'fit',
      region: 'west',
      title: 'Tasks',
      width: 180,
      split: true,
      collapsible: true,
      floatable: false,
      items: [{
        xtype: 'treepanel',
        store: treeStore,
        rootVisible: false,
      }]
    }, {
      layout: 'fit',
      region: 'center',
      items: [{
        xtype: 'textarea',
        value: new Lorem().createText(6, Lorem.TYPE.SENTENCE),
        flex: 1
      }]
    }]
  });

  myWindow.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>
<script src="https://cdn.rawgit.com/f/loremjs/master/lorem.js"></script>