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:"<object classid='clsid:1EE1C648-F4A9-42F9-9AA7-2C8E3AF7B7FD' height='100%' width='100%' id = 'EasyPlayerOcx1'></object>",
            tbar:[{
                text:'实时预览',
                iconCls:'icon_recovery',
                handler: function() {
                    StartShow();
                }
            },"-",{
                text:'停止预览',
                iconCls:'icon_stop',
                handler: function() {
                    StopShow();
                }
            }
            ]
        },{
            height:(Ext.getBody().getViewSize().height-15)/2,
            html:"<object classid='clsid:1EE1C648-F4A9-42F9-9AA7-2C8E3AF7B7FD' height='100%' width='100%' id = 'EasyPlayerOcx3'></object>",
            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()

     })

效果图：