Hybrid View

  1. #1
    Ext User
    Join Date
    Jun 2007
    Posts
    5
    Vote Rating
    0
    jozzhart is on a distinguished road

      0  

    Default [2.0b1/rc1] GridPanel rendering bug in IE

    [2.0b1/rc1] GridPanel rendering bug in IE


    Hello,

    Finding some GridPanel rendering issues in both IE6 and IE7.

    First issue effects about IE6 and IE7. If I have a gridpanel with a fixed width, and scrolling enabled on the parent container, if the grid is bigger than the available area and the scroll bar appears, scrolling across only scrolls the column header.

    http://extjs.jozzhart.com/gridOne.htm
    HTML Code:
    Ext.onReady(function(){
    
    		var xg = Ext.grid;
    
    		var reader = new Ext.data.ArrayReader({}, [
    		   {name: 'company'},
    		   {name: 'price', type: 'float'},
    		   {name: 'change', type: 'float'},
    		   {name: 'pctChange', type: 'float'},
    		   {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
    		   {name: 'industry'},
    		   {name: 'desc'}
    		]);
    		
     		var alertsGrid = new xg.GridPanel({
    			ds: new Ext.data.Store({
    				reader: reader,
    				data: xg.dummyData
    			}),
    			cm: new xg.ColumnModel([
    				new xg.RowNumberer(),
    				{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
    				{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
    				{header: "Change", width: 20, sortable: true, dataIndex: 'change'},
    				{header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
    				{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    			]),
    			viewConfig: {
    				forceFit:true
    			},
    			width : '800',
    			title:'Grid with Numbered Rows and Fixed width',
    			iconCls:'icon-grid'
    		});
    
    		var viewport = new Ext.Viewport( {
    
            layout:"border",
            items:[{
                region:"center",
                title:"dashboard",
    			autoScroll : true,
    			items : [alertsGrid]
              },{
                region:"north",
                title:"search",
                height:40
              },{
                region:"south",
                title:"Top Questions",
                collapsible:true,
                collapsed:true
              },{
                region:"west",
                title:"good practice",
                collapsible:true,
                width:200,
                collapsed:true
              }]
    	})
    });
    
    Ext.grid.dummyData = [
        ['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
        ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
    ];
    Second bug only effects IE6. If the gridpanel is set to autoWidth : true, width : 'auto' the grid doens't resize to fit the container, and a scroll bar appears, with the same scrolling issue as described above.

    http://extjs.jozzhart.com/gridTwo.htm


    HTML Code:
    Ext.onReady(function(){
    
    		var xg = Ext.grid;
    
    		var reader = new Ext.data.ArrayReader({}, [
    		   {name: 'company'},
    		   {name: 'price', type: 'float'},
    		   {name: 'change', type: 'float'},
    		   {name: 'pctChange', type: 'float'},
    		   {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
    		   {name: 'industry'},
    		   {name: 'desc'}
    		]);
    		
     		var alertsGrid = new xg.GridPanel({
    			ds: new Ext.data.Store({
    				reader: reader,
    				data: xg.dummyData
    			}),
    			cm: new xg.ColumnModel([
    				new xg.RowNumberer(),
    				{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
    				{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
    				{header: "Change", width: 20, sortable: true, dataIndex: 'change'},
    				{header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
    				{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    			]),
    			viewConfig: {
    				forceFit:true
    			},
    			autoWidth : true,
    			width : 'auto',
    			title:'Grid with Numbered Rows and Force Fit',
    			iconCls:'icon-grid'
    		});
    
    		var viewport = new Ext.Viewport( {
    
            layout:"border",
            items:[{
                region:"center",
                title:"dashboard",
    			autoScroll : true,
    			items : [alertsGrid]
              },{
                region:"north",
                title:"search",
                height:40
              },{
                region:"south",
                title:"Top Questions",
                collapsible:true,
                collapsed:true
              },{
                region:"west",
                title:"good practice",
                collapsible:true,
                width:200,
                collapsed:true
              }]
    	})
    });
    
    Ext.grid.dummyData = [
        ['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
        ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
    ];
    Attached Images

  2. #2
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    4
    Vote Rating
    0
    smcneill is on a distinguished road

      0  

    Default


    I have virtually the exact same code resulting in the same scenario. Any suggestions?

  3. #3

    Default


    I've got the same problems.
    Did you find how to resolve them?


  4. #4
    Ext User
    Join Date
    Oct 2007
    Posts
    3
    Vote Rating
    0
    tony_murphy@yahoo.com is on a distinguished road

      0  

    Default from-grid.js

    from-grid.js


    Think same problem:

    Problem can be seen in from-grid example in release, works ok in firefox, scrolls horizontally for ever in IE6

    I manually set width of .x-panel-body in my html file as a quick workaround

    <style type="text/css">
    /*hack when converting table in ext 2 for ie */
    .x-panel-body {
    width: 966px;
    }
    </style>

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Try removing the width from you GridPanel config. Since you're putting it into a border layout of the ViewPort, it's layout should handle sizing it to the size of the center region, which should be calculated as whatever is left after sizing the west region.

  6. #6
    Ext User
    Join Date
    Jun 2007
    Posts
    5
    Vote Rating
    0
    jozzhart is on a distinguished road

      0  

    Default


    Hi Tim

    Removing the width from the GridPanel doesn't fix it......

    http://extjs.jozzhart.com/gridThree.htm

  7. #7
    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


    this is probably a duplicate of the bug reported in this thread:
    http://www.sencha.com/forum/showthread.php?t=15642

    let us know if the solution there resolves your issue.

  8. #8
    Sencha User Zyclops's Avatar
    Join Date
    Jul 2007
    Location
    Adelaide, South Australia
    Posts
    154
    Vote Rating
    0
    Zyclops is on a distinguished road

      0  

    Default


    I'm having the same issue (using 2.0-RC1):

    In ie7, ff, safari it looks fine but in ie6 it's about 10x the size of the screen.

    I originally just had a grid panel.. then i've tried sticking it in a container layout like below:
    Code:
    this.grid =  new Ext.grid.GridPanel( {  store:  ds,
                                         cm: colModel,
                                            loadMask: true,
                                            plugins: filters,
                                            height: 400,
                                            frame: true});
    var container = new Ext.Container({applyTo: this.grid_name + '_panel' 
                                               layout: 'fit',
                                               items: this.grid});
    Setting a fixed width on the container or the grid stops it being 10* but that doesn't fix the issue as I want the grid to take up any size it can within it's container div (not the viewport).

  9. #9
    Ext User
    Join Date
    Nov 2007
    Posts
    7
    Vote Rating
    0
    timezz is on a distinguished road

      0  

    Default


    Try remove the DOCTYPE. I know it doesn't make any sense. But when I remove these two line:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    The "header not appear" bug is fixed.

    Of course, firefox still works perfectly.

  10. #10
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    I still have that issue with no doctype