Threaded View

    You found a bug! We've classified it as EXTJS-10234 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    6
    Vote Rating
    0
    pegafal is on a distinguished road

      0  

    Default Flickering when moving the Ext.Window outside of viewport area

    Flickering when moving the Ext.Window outside of viewport area


    I have a viewport with one panel and inside a panel there is a window with constrain and constrainHeader set to true.

    When I move the window to the bottom area, there is a flickering. It doesn't happen every time but it is quite often.

    This happens at least in IE9, Chrome 27 is working fine.
    EXTJS version used in this case is 4.2.1 from CDN

    Any idea what I might do wrong here?

    I attach the complete code (rename txt to html)

    Thanks




    Code:
    Ext.create('Ext.container.Viewport', {
        layout: "fit",
        items: [{
            region: 'center',
            xtype: 'panel', 
            html: "<div class='map-canvas' style='height: 100%; border: 10px solid red;'></div>",
            listeners: {
                afterrender: function() {
                    var win = Ext.create('Ext.window.Window', {
                            title: 'Hello',
                            renderTo: this.el,
                            constrain: true,
                            constrainHeader: true,
                            height: 200,
                            width: 400,
                            layout: 'fit',
                            items: {  // Let's put an empty grid in just to illustrate fit layout
                                xtype: 'grid',
                                border: false,
                                columns: [{header: 'World'}],                 // One header just for show. There's no data,
                                store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
                            }
                        });
                //    this.add(win);
                win.center();
                    win.show();
                }
            }
        }]
    });
    *EDIT BY SLEMMON
    I'm seeing the issue when dragging the window to the bottom of the screen when testing with the below test case in IE8, IE9, and IE10 with 4.2.0 and 4.2.1, but do not see the issue in Chrome or FF.
    Code:
    Ext.create('Ext.container.Viewport', {
        layout: "fit",
        items: [{
            region: 'center',
            xtype: 'panel', 
            html: "<div class='map-canvas' style='height: 100%; border: 10px solid red;'></div>",
            listeners: {
                afterrender: function() {
                    var win = Ext.create('Ext.window.Window', {
                            title: 'Hello',
                            renderTo: this.el,
                            constrainHeader: true,
                            height: 200,
                            width: 400,
                            layout: 'fit',
                            items: {  // Let's put an empty grid in just to illustrate fit layout
                                xtype: 'grid',
                                border: false,
                                columns: [{header: 'World'}],                 // One header just for show. There's no data,
                                store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
                            }
                        });
                    win.show();
                }
            }
        }]
    });
    Attached Files
    Last edited by slemmon; 16 Jun 2013 at 10:22 PM. Reason: include extjs version tested :: additional test notes

Thread Participants: 2