效果图：

ExtJS4 border layout 左侧treePanel 中间 panel_javascript



<link href="../extjs-4.1.1/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="../extjs-4.1.1/ext-all-debug.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{
text: "homework",
expanded: true,
children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true }
]
},
{ text: "other", leaf: true },
{ text: "other", leaf: true },
{ text: "other", leaf: true },
{ text: "other", leaf: true },
{ text: "other", leaf: true },
{ text: "other", leaf: true },
{ text: "other", leaf: true },
{ text: "other", leaf: true },
{ text: "other", leaf: true },
{ text: "other", leaf: true },
{ text: "other", leaf: true }
]
}
});
var tree = Ext.create('Ext.tree.Panel', {
region: 'west', //for border layout
collapsible: true,
title: 'Simple Tree',
bodyStyle: 'background:#ffc;',
width: 200,
store: store,
rootVisible: false,
margins: '5 0 5 5'
});
var main = Ext.create('Ext.panel.Panel', {
region: 'center', //for border layout
title: 'Main Panel',
bodyPadding: 10,
html: 'html content',
margins: '5 5 5 5'
});
Ext.create('Ext.panel.Panel', {
layout: 'border',
width: 600,
height: 250,
items: [
tree,
main
],
renderTo: Ext.getBody()
});
});</script>