1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
    toxkillfraex is on a distinguished road

      0  

    Default Unanswered: A scroll bar shows up in the middle of a video panel

    Unanswered: A scroll bar shows up in the middle of a video panel


    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.

    anyhow

    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. buggy video.jpg

    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?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,075
    Answers
    673
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

    Regards,
    Scott

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
    toxkillfraex is on a distinguished road

      0  

    Default


    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:
    Code:
    Ext.ns('Ext.ux');
     
    /* -NOTICE-
     * 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
        }));
     
        this.on({
          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,
          onabort:"console.log('onabort');",
            oncanplay:"console.log('oncanplay');",
          oncanplaythrough:"console.log('oncanplaythrough');",
          ondurationchange:"console.log('ondurationchange');",
          onemptied:"console.log('onemptied');",
          onended:"console.log('onended');",
          onerror:"console.log('onerror');",
          onloadeddata:"console.log('onloadeddata');",
          onloadedmetadata:"console.log('onloadedmetadata');",
          onloadstart:"console.log('onloadstart');",
          onpause:"console.log('onpause');",
          onplay:"console.log('onplay');",
          onplaying:"console.log('onplaying');",
          onprogress:"console.log('onprogress');",
          onratechange:"console.log('onratechange');",
          onreadystatechange:"console.log('onreadystatechange');",
          onseeked:"console.log('onseeked');",
          onseeking:"console.log('onseeking');",
          onstalled:"console.log('onstalled');",
          onsuspend:"console.log('onsuspend');",
          ontimeupdate:"console.log('ontimeupdate');",
          onvolumechange:"console.log('onvolumechange');",
          onwaiting:"console.log('onwaiting');"
        },
        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";
            }
     
            cfg.children.push(
              Ext.applyIf({tag: 'source'}, this.src[i])
            );
          }
     
          cfg.children.push({
            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:
    Code:
    Ext.define('App.view.window.Search', 
    {
        extend: 'Ext.window.Window',    
        requires: ['Ext.window.Window'],
        
        id: 'searchWindow',
        alias: 'widget.search',
        
        cls: 'search',
        iconCls: 'searchWindowIcon',
        bodyCls: 'panelBody',
        
        width: '60%',
        height: '60%',
        
        layout:
        {
            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,
                
                store:{
                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}
                ],        
                
                viewConfig: 
                {
                    forceFit: true
                },    
                
                autoScroll: true,
                columnLines: true
                 
            });    
                
            Ext.applyIf(me,
            {
                items: [searchBtnContainer, searchForm, grid]
            });
            me.callParent(arguments);        
            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

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
    toxkillfraex is on a distinguished road

      0  

    Default


    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

Thread Participants: 1

Tags for this Thread