ExtJS4 border layout 左侧treePanel 中间 panel

 

效果图：

 <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>