Extjs 布局篇-上下左右布局

Ext.define('VedioDuosenApp.view.VedioView' ,{
    extend: 'Ext.panel.Panel',
    alias : 'widget.vedioView',
    id:'vediopanel',
    //title: '视频',
    header : false,
    autoHeight : true,
    region: "west",
    width: (Ext.getBody().getViewSize().width-280)*0.5,
    border: true,
    frame: true,
    bodyStyle:'padding:5 5 5 5',
    layout: 'vbox',
    defaults: {
        frame: true,
        id: 'vediopanel_1',
        height:Ext.getBody().getViewSize().height-15,
        width:(Ext.getBody().getViewSize().width-280)*0.49
    },
    items: [{
        layout:'vbox',
        defaults: {
            frame: true,
            width:(Ext.getBody().getViewSize().width-280)*0.49
        },
        items:[{
            height:(Ext.getBody().getViewSize().height-15)/2,
            html:"",
            tbar:[{
                text:'实时预览',
                iconCls:'icon_recovery',
                handler: function() {
                    StartShow();
                }
            },"-",{
                text:'停止预览',
                iconCls:'icon_stop',
                handler: function() {
                    StopShow();
                }
            }
            ]
        },{
            height:(Ext.getBody().getViewSize().height-15)/2,
            html:"",
            tbar:[{
                text:'实时预览',
                iconCls:'icon_recovery',
                handler: function() {
                    StartShow();
                }
            },"-",{
                text:'停止预览',
                iconCls:'icon_stop',
                handler: function() {
                    StopShow();
                }
            }
            ]
        }]
    }]
});

参考demo:

Ext.onReady( function  () {

    Ext.create( 'Ext.panel.Panel' ,{

    layout:{
        type: 'column'
    },
    default :{
        xtype: 'panel'
    },
    border:1,
    width:600,
    height:400,
    padding:10,
    items:[{
        margin: '30px' ,
        width:150,
        height:290,
        layout: 'vbox' ,
        items:[{
            width:150,
        height:90,
        html: 'form'
        },{
            width:150,
        height:200,
        html: 'gridPanel'
        }]
    },{
        margin: '30px 30px 30px 0' ,
        width:150,
        height:290,
        layout: 'vbox' ,
        items:[{
        width:150,
        height:90,
        html: 'form'
        },{
        width:150,
        height:200,
        html: 'gridPanel'
        }]
    },{
        margin: '30px 30px 30px 0' ,
        width:150,
        height:290,
        layout: 'vbox' ,
        items:[{
            width:150,
        height:90,
        html: 'form'
        },{
        width:150,
        height:200,
        html: 'gridPanel'
        }]
    }],
    renderTo:Ext.getBody()
    })

效果图：