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();
}
}
]
}]
}]
});
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()
})
效果图: