how will i use border layout in extjs - 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

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

Answer 2

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

Answer 3

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>