EXTJS4.2——6.官方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布局',
            //这里设置panel的样式
            layout: 'border',
            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
                title: 'West Region is collapsible',
                region: 'west',
                xtype: 'panel',
                margins: '5 0 0 5',
                width: 200,
                //设置是否可以折叠
                collapsible: true, 
                id: 'west-region-container',
                layout: 'fit'
            },
            //中间组件
            {
                title: 'Center Region',
                region: 'center',
                xtype: 'panel',
                layout: 'fit',
                margins: '5 5 0 0'
            }],
            renderTo: Ext.getBody()
        });
    })
</script>

margins指的是距离边缘的距离
margins:'上 右 左 下'
例如：margins: '5 8 4 5'