View Full Version : A scroll bar shows up in the middle of a video panel

4 May 2012, 4:39 AM
And I know where the scroll bar is coming from and might consider this more a bug rather than a question that can be easily solved.


here's the thing. I'm using a slightly adapted HTML5Video plugin (and a audio version of that) to play video's

however in out app LOOOOONG before you get to the video there's a window with a result grid in it that can have scrollbar.

when it has a scrollbar and you later open a video (i.e. initialize the video) the scroll happily stands there waving it's hand being all like IMMA RUIN your video experience..

Okay okay I can't give you a toned down version of the app to illustrate the issue easily, but what I can to is give you a screenshot. 34896

it's really small because the only way it happens is if I make the window really small because we don't have that much data going on.

I was considering making it invisible somehow but the css has no effect on it. Destroying the window is a no go and would give allot of re-coding headaches.

any other ideas?
or should I just shove this over to bug reports?

4 May 2012, 7:47 AM
Perhaps someone can provide 'suggestions' based on your screen, but you may have to provide a working example. If you are going to issue a bug report, you will need to provide code.

Please note that a bug in your plugin may not be a bug in our software. ;)


7 May 2012, 2:15 AM
sorry for the late response, but uhm for one I used a slightly edited plugin I found on the forums (that was originally made for ext 3.0)

for which the code in my hands became:


* For HTML5 video to work, your server must
* send the right content type, for more info see:
* https://developer.mozilla.org/En/HTML/Element/Video
Ext.ux.HTML5VideoPanel = Ext.extend(Ext.Panel, {

constructor: function(config) {
Ext.ux.HTML5VideoPanel.superclass.constructor.call(this, Ext.applyIf(config, {
width : '100%',
height : '100%',
autoplay : false,
controls : true,
bodyStyle: 'background-color:#000;color:#fff',
html : '',
suggestChromeFrame: false

scope : this,
render : this._render,
beforedestroy: function() {
this.video = null;
bodyresize : function(panel, width, height) {

if (this.video)
this.video.setSize(width, height);
resize : function(panel, width, height)

if (this.video)
this.video.setSize(width, height);

_render: function() {
var fallback = '';

if (this.fallbackHTML) {
fallback = this.fallbackHTML;
} else {
fallback = "Your browser doesn't support html5 video. ";

if (Ext.isIE && this.suggestChromeFrame) {
/* chromeframe requires that your site have a special tag in the header
* see http://code.google.com/chrome/chromeframe/ for details
fallback += '<a>Get Google Chrome Frame for IE</a>';
} else if (Ext.isChrome) {
fallback += '<a>Upgrade Chrome</a>';
} else if (Ext.isGecko) {
fallback += '<a>Upgrade to Firefox 3.5</a>';
} else {
fallback += '<a>Get Firefox 3.5</a>';

/* match the video size to the panel dimensions */
var size = this.getSize();

var cfg = Ext.copyTo({
tag : 'video',
width : size.width,
height: size.height,
this, 'poster,start,loopstart,loopend,playcount,autobuffer,loop');

/* just having the params exist enables them */
if (this.autoplay) cfg.autoplay = 1;
if (this.controls) cfg.controls = 1;
if (this.videoId) cfg.id = this.videoId;

/* handle multiple sources */
if (Ext.isArray(this.src)) {
cfg.children = [];

for (var i = 0, len = this.src.length; i < len; i++)
if (!Ext.isObject(this.src[i]))
throw "source list passed to html5video panel must be an array of objects";

Ext.applyIf({tag: 'source'}, this.src[i])

html: fallback

} else {
cfg.src = this.src;
cfg.html = fallback;

this.video = this.body.createChild(cfg);



the zillion listeners are for debugging purposes since I haven't managed to fix all bugs in it properly yet. (right now seeking in this set up is impossible in firefox and chrome, but I'm not in need for help on this matter right now)

the window that would cause the scrollbar is a hidden window with an overflown grid.

so for simplicity sake I'd make it out as this for exemplary purposes:

extend: 'Ext.window.Window',
requires: ['Ext.window.Window'],

id: 'searchWindow',
alias: 'widget.search',

cls: 'search',
iconCls: 'searchWindowIcon',
bodyCls: 'panelBody',

width: '60%',
height: '60%',

type: 'vbox'

title: 'Search',

closeAction: 'hide',

//initialize container and it's components
initComponent: function()
var me = this;

grid = new Ext.grid.GridPanel
id: 'searchGrid',

cls: 'searchResults',

title: locale['searchGrid'],

width: '92%',
flex: 1,

fields: ['name', 'email'],
data : [
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'},
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'},
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'},
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'},
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'},
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'},
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'},
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'},
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'}

columns: //not really important for this case
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}

forceFit: true

autoScroll: true,
columnLines: true


items: [searchBtnContainer, searchForm, grid]
return me;


i'd use some local data to make a panel with a working video and then run it with the window in the middle and hide it...

I'm pretty sure it'll give the same effect as what I've been getting

7 May 2012, 2:27 AM
I tested it again with the simplified set up (with the overflown window I've provided in code) and the scroll bar sticks around on the video panel after hiding said window

Now I'm looking for somebody to confirm this and help me out to solve this and/or confirm it as a bug.

my best throw at a fix right now is to let it destroy on close and reinitialize it every time it's about to be opened. If anything I heavily dislike exceptions on a rule though =/ so I'm open for other suggestions. Or a pointer to where in the plugin it bugs up