Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #1
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

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

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


    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> 
    Attached Images

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,884
    Vote Rating
    440
    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


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

    Scott.

  3. #3
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

    Default


    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.
    Attached Images

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,660
    Vote Rating
    584
    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


    What do you mean by fit to the window? Are you nesting it somehow? As Scott said, forceFit is redundant with flex.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,884
    Vote Rating
    440
    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


    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.

  6. #6
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

    Default


    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.
    Attached Images

  7. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,884
    Vote Rating
    440
    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


    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.

  8. #8
    Touch Premium Member
    Join Date
    Nov 2009
    Location
    London
    Posts
    49
    Vote Rating
    6
    mattgoldspink is on a distinguished road

      0  

    Default


    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