Ext4.1.1a: grid ForceFit: true bug with either flex or width

**jimmylu98** · 1 Oct 2012 6:45 AM

This is very annoying bug during my migration from 3.x.x to 4.1.x. It doesn't matter I use flex or width. It happens only FIRST TIME try to move a column when using flex.

Please see both test codes with FF12.0&15.0 and Chrome 22.

Using width:

PHP Code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Stateful Array Grid Example test </title>
    <link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css" />
    <script type="text/javascript" src="/ext/ext-all-debug.js"></script>

    <script type="text/javascript">



Ext.onReady(function() {
    Ext.QuickTips.init();

    // sample static data for the store
    var myData = [
        ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
        ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
        ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
        ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
        ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
    ];

    // create the data store
    var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'company'},
           {name: 'price',      type: 'float'},
           {name: 'change',     type: 'float'},
           {name: 'pctChange',  type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ],
        data: myData
    });

    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
    layout: 'fit',
    forceFit: true,
        store: store,
        columns: [
            {
                text     : 'Company',
                width    : 75,
                sortable : false,
                dataIndex: 'company'
            },
            {
                text     : 'Price',
                width    : 75,
                sortable : true,
                dataIndex: 'price'
            },
            {
                text     : 'pctChange',
                width    : 75,
                sortable : true,
                dataIndex: 'pctChange'
            },
            {
                text     : 'Change',
                width    : 75,
                sortable : true,
                dataIndex: 'change'
            }
        ],
    columnLines: true,
        height: 350,
        width: 600,
        title: 'Array Grid',
        renderTo: 'grid-example',
        viewConfig: {
            stripeRows: true        
        }
    });
});


   </script>
</head>
<body>
    <div id="grid-example"></div>
</body>
</html>

Using flex:

PHP Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Stateful Array Grid Example test </title>
    <link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css" />
    <script type="text/javascript" src="/ext/ext-all-debug.js"></script>

    <script type="text/javascript">



Ext.onReady(function() {
    Ext.QuickTips.init();

    // sample static data for the store
    var myData = [
        ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
        ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
        ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
        ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
        ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
    ];

    // create the data store
    var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'company'},
           {name: 'price',      type: 'float'},
           {name: 'change',     type: 'float'},
           {name: 'pctChange',  type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ],
        data: myData
    });

    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
    layout: 'fit',
    forceFit: true,
        store: store,
        columns: [
            {
                text     : 'Company',
                flex    : 1,
                sortable : false,
                dataIndex: 'company'
            },
            {
                text     : 'Price',
                flex    : 2,
                sortable : true,
                dataIndex: 'price'
            },
            {
                text     : 'pctChange',
                flex    : 2,
                sortable : true,
                dataIndex: 'pctChange'
            },
            {
                text     : 'Change',
                flex    : 1,
                sortable : true,
                dataIndex: 'change'
            }
        ],
    columnLines: true,
        height: 350,
        width: 600,
        title: 'Array Grid',
        renderTo: 'grid-example',
        viewConfig: {
            stripeRows: true        
        }
    });
});


   </script>
</head>
<body>
    <div id="grid-example"></div>
</body>
</html>

**scottmartin** · 1 Oct 2012 7:12 AM

If you are using flex on your columns, you don't need to use forceFit at all.

Scott.

**jimmylu98** · 1 Oct 2012 7:49 AM

Thanks for quick replay.

However, if don't use forcefit at all, how do I fit the grid to window?

See attached pictures: (1) use flex without forcefit, move column price you will see scroll bar at bottom, (2) use width without forcefit, grid will not fit window initially, and scroll bar at bottom will show up if you move column.

**evant** · 1 Oct 2012 11:23 PM

What do you mean by fit to the window? Are you nesting it somehow? As Scott said, forceFit is redundant with flex.

**scottmartin** · 2 Oct 2012 4:07 AM

Please see the following example:

Code:

Ext.create('Ext.data.Store', {
    storeId : 'simpsonsStore',
    fields  : ['name', 'email', 'change'],
    data    : {'items' : [
        { 'name' : 'Lisa',  'email' : 'lisa@simpsons.com',  'change' : 100  },
        { 'name' : 'Bart',  'email' : 'bart@simpsons.com',  'change' : -20  },
        { 'name' : 'Homer', 'email' : 'home@simpsons.com',  'change' : 23   },
        { 'name' : 'Marge', 'email' : 'marge@simpsons.com', 'change' : -11  }
    ]},
    proxy   : {
        type   : 'memory',
        reader : {
            type : 'json',
            root : 'items'
        }
    }
});

Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'fit',
    items: {  
        xtype: 'grid',
        border: false,
        store      : Ext.data.StoreManager.lookup('simpsonsStore'),
        columns    : [
            { header : 'Name', dataIndex : 'name' },
            { header : 'Email', dataIndex : 'email', flex : 1 },
            { header : 'Change', dataIndex : 'change'}
        ]
    }
}).show();

Scott.

**jimmylu98** · 2 Oct 2012 5:36 AM

Looks like you didn't test my code. Ok I have tested your code (no change of your code, try to resize column ), it has same problem. See attached picture.

The bug is the default minWidth is not set. If set minWidth to 1. The problem will go a way.

**scottmartin** · 2 Oct 2012 5:59 AM

Set flex on the last column does help, but you can still get the scroll to appear if the last column is lower than the default minWidth. Setting to 1 does seem to help.

I am not sure I would classify this as a bug as it is behaving as expected. I will have to talk with dev about this.

Scott.

**mattgoldspink** · 6 Mar 2013 10:37 AM

Since this asked for more info and I wasn't sure if the OP was having the exact same issue I've filed another report here:

http://www.sencha.com/forum/showthre...esize&p=944853

Ext4.1.1a: grid ForceFit: true bug with either flex or width

Thread Tools

Search Thread

Display

Ext4.1.1a: grid ForceFit: true bug with either flex or width

Ext4.1.1a: grid ForceFit: true bug with either flex or width