Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Mar 2009
    Posts
    34
    Vote Rating
    -13
    Dhugal can only hope to improve

      0  

    Question [FIXED-954][3.0.3] EditorGrid bug - scrolled celleditor only partially visible

    [FIXED-954][3.0.3] EditorGrid bug - scrolled celleditor only partially visible


    Extjs Version: 3.0.3
    Adapter: Ext
    CSS: Ext-All.Css
    Browsers Effected: IE7, IE8 (not tested in IE6)
    OS: Win XP Pro

    Hi All,

    I am experiencing a bug in the Editor grid for columns which are initially on the right hand border of the grid's visible area.

    Essentially when you try to edit a cell in the column in question the editor is only partially visible, with the right hand side being masked by a blue block. This does NOT always appear for all columns to the right. In the images attached you can see the 2nd from last column exhibits the problem, but the last column does not. This appears to be tied to the fact that that column is on the right hand border of the grid when it is initially rendered.

    I am using ExtJs 3.0.3 and I am experiencing the problem in IE8, and IE7 but the issue does not occur in Firefox 3.5.5.

    In the example shown the column in question has an associated date picker but the problem also occurs with a numerical field.

    Does anyone have any ideas on how to address this?

    Thanks,

    Dhugal.
    Attached Images
    Last edited by Dhugal; 11 Dec 2009 at 5:12 AM. Reason: Include version no in title.

  2. #2
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    are you including a DOCTYPE?

    could you post a test case as mentioned in http://www.sencha.com/forum/showthread.php?t=71015?

  3. #3
    Sencha User
    Join Date
    Mar 2009
    Posts
    34
    Vote Rating
    -13
    Dhugal can only hope to improve

      0  

    Default


    Hi Mystix,

    Thanks for your response.

    Yes I am including a doctype as follows:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    One thing I have noticed is that the obscuring blue block's size is directly related to the amount the column runs over the edge of the grid on initial load.

    Unfortunately I don't have time to do a test case today but I will try and put one together early next week.

    Thanks,

    Dhugal.

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,835
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    As suggested by Marc, it's difficult to start without seeing a test case.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    37
    Vote Rating
    0
    sareko is on a distinguished road

      0  

    Default


    Posting this here since it is still in INFOREQ status and i have the same issue:

    Ext version tested:
    • Ext 3.2.1

    Adapter used:
    • ext

    css used:
    • only default ext-all.css



    Browser versions tested against:
    • IE7

    Operating System:
    • WinXP Pro

    Description:
    • As describe per the first post. If an EditorGridPanel's with horizontal scrolling where the grid load with a scrollbar due to column widths, any (usually exactly 1, in practice) column that is partially visible initially (and only initially) will experience a bug when editing, where the editor only partially shows. Looking at it with the IE Dev Toolbar, the textfield/textarea/whatever is actually of the correct size, but one of the divs that contain it does not resize properly (and since overflow:hidden, the textfield ends up being partially hidden)

    Test Case:

    Code:
        Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
    
            var sampleData = { root: [
                {id: 1, Column1: 'Column1A', Column2: 'Column2A', Column3: 'Column3A', Column4: 'Column4A'},
                {id: 2, Column1: 'Column1B', Column2: 'Column2B', Column3: 'Column3B', Column4: 'Column4B'},
                {id: 3, Column1: 'Column1C', Column2: 'Column2C', Column3: 'Column3C', Column4: 'Column4C'},
                {id: 4, Column1: 'Column1D', Column2: 'Column2D', Column3: 'Column3D', Column4: 'Column4D'},
                {id: 5, Column1: 'Column1E', Column2: 'Column2E', Column3: 'Column3E', Column4: 'Column4E'},
                {id: 6, Column1: 'Column1F', Column2: 'Column2F', Column3: 'Column3F', Column4: 'Column4F'},
                {id: 7, Column1: 'Column1G', Column2: 'Column2G', Column3: 'Column3G', Column4: 'Column4G'},
                {id: 8, Column1: 'Column1H', Column2: 'Column2H', Column3: 'Column3H', Column4: 'Column4H'},
                {id: 9, Column1: 'Column1I', Column2: 'Column2I', Column3: 'Column3I', Column4: 'Column4I'}
            ]};
            
            var sampleStore = new Ext.data.JsonStore({
                root: 'root',
                idProperty: 'id',
                fields: [
                    {name: 'Column1'},
                    {name: 'Column2'},
                    {name: 'Column3'},
                    {name: 'Column4'}
                ]
            });
    
            sampleStore.loadData(sampleData);
            
            scrollingGrid = new Ext.grid.EditorGridPanel({   
                store: sampleStore,
                frame: true,
                width: 700,
                height: 500,
                columns: [
                    {
                        xtype: 'gridcolumn',
                        header: 'Column1',                       
                        width: 300,
                        dataIndex: 'Column1',
                        editor: {
                            xtype: 'textarea'
                        }
                    },
                    {
                        xtype: 'gridcolumn',
                        header: 'Column2',                       
                        width: 300,
                        dataIndex: 'Column2',
                        editor: {
                            xtype: 'textarea'
                        }
                    },
                    {
                        xtype: 'gridcolumn',
                        header: 'Column3',                       
                        width: 300,
                        dataIndex: 'Column3',
                        editor: {
                            xtype: 'textarea'
                        }
                    },
                    {
                        xtype: 'gridcolumn',
                        header: 'Column4',                       
                        width: 300,
                        dataIndex: 'Column4',
                        editor: {
                            xtype: 'textarea'
                        }
                    }
                ]                
            });
    
            Ext.onReady(function() {
                var viewport = new Ext.Viewport({
                    renderTo: Ext.getBody(),
                    layout: 'absolute',
                    items: [scrollingGrid]
                });        
            })
    Steps to reproduce the problem:
    • Use the code above in IE7 (the original post states this issue is present in IE8 too, but I do not have access
      to IE6/8 currently. I wouldn't be surprised if it wasn't isolated to IE7, but the bug is NOT present in Firefox/Chrome
    • Double click in column 3 (the right-most visible column when loading the above code) to start editing
    • Notice that the editor is only partially shown, as per the screenshots provided in the original post.

    The result that was expected:
    • The editor should be fully visible, as it will be in any other column that is fully visible or fully hidden when the grid load (such as Column1, Column2 and Column4 if using the code I posted)

    The result that occurs instead:
    • Column3's editor is partially hidden

    Screenshot or Video:
    testcase.jpg

    Debugging already done:
    • I looked with the IE Dev toolbar and can see that the editor itself is sized properly. It is just partly hidden, probably (I'm no expert) because its container div is not properly resized

    Possible fix:
    • not provided

  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    37
    Vote Rating
    0
    sareko is on a distinguished road

      0  

    Default


    Additional detail:

    this bug does NOT happen when in quirk mode. If i provide a valid XHTML 1.0 transitional doctype, then it happens. Of course, in quirk mode a bunch of other things break, so it isn't a very good workaround for me

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,835
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Confirmed for only IE7 strict mode. Works as expected in quirks for all and strict in IE6/8.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #8
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,835
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    This has been fixed in SVN, rev 6634.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 3