extjs官方border示例

<script src="~/Scripts/Extjs4.2/ext-all.js"></script>
<link href="~/Scripts/Extjs4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" />
<script src="~/Scripts/Extjs4.2/ext-theme-neptune.js"></script>
<script>
    Ext.onReady(function () {
        Ext.create('Ext.panel.Panel', {
            width: 500,
            height: 300,
            title: 'Border布局',
            layout: 'border',//这里设置panel的样式
            items: [{//items设置border里面的详细样式，比如上框，下
                title: 'South Region is resizable',
                region: 'south',     
                xtype: 'panel',
                height: 100,
                split: true,         // enable resizing
                margins: '0 5 5 5'
            }, {
                // xtype: 'panel' implied by default
                title: 'West Region is collapsible',
                region: 'west',
                xtype: 'panel',
                margins: '5 0 0 5',
                width: 200,
                collapsible: true,   // make collapsible
                id: 'west-region-container',
                layout: 'fit'
            }, {
                title: 'Center Region',
                region: 'center',     
                xtype: 'panel',
                layout: 'fit',
                margins: '5 5 0 0'
            }],
            renderTo: Ext.getBody()
        });
    })
    
</script>