Results 1 to 8 of 8

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

    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
    220
    Vote Rating
    9
      0  

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

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,388
    Vote Rating
    499
      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
    220
    Vote Rating
    9
      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 Attached Images

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,382
    Vote Rating
    858
      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
    9,388
    Vote Rating
    499
      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
    220
    Vote Rating
    9
      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 Attached Images

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •