Results 1 to 3 of 3

Thread: Grid - column resize problem, when horizontal scrollbar visible

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    2

    Default Grid - column resize problem, when horizontal scrollbar visible

    If I use grid component with horizontal scrollbar and the a scrollbar is not scrolled to the left side, there is a problem with column resizing. After the column resizing, the rows resized normally, but the scrollbar lost the position. So the scrollbar and data in the grid will be inconsistent.

    To reproduce here is the array-grid example from 4.0.1 with 500px width first column. Scroll to right and resize a column.


    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</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../shared/example.css" />
        <script type="text/javascript" src="../../bootstrap.js"></script>
    
        <!-- page specific -->
        <style type="text/css">
            /* style rows on mouseover */
            .x-grid-row-over .x-grid-cell-inner {
                font-weight: bold;
            }
            /* shared styles for the ActionColumn icons */
            .x-action-col-cell img {
                height: 16px;
                width: 16px;
                cursor: pointer;
            }
            /* custom icon for the "buy" ActionColumn icon */
            .x-action-col-cell img.buy-col {
                background-image: url(../shared/icons/fam/accept.gif);
            }
            /* custom icon for the "alert" ActionColumn icon */
            .x-action-col-cell img.alert-col {
                background-image: url(../shared/icons/fam/error.gif);
            }
        </style>
    </head>
    <body>
        <h1>Stateful Array Grid Example</h1>
        <p>This example shows how to create a grid from Array data.</p>
        <p>The grid is stateful so you can move or hide columns, reload the page, and come
        back to the grid in the same state you left it in.</p>
        <p>Note that the js is not minified so it is readable. See <a href="array-grid.js">array-grid.js</a>.</p>
        <div id="grid-example"></div>
        <script type="text/javascript">
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.state.*'
    ]);
    
    Ext.onReady(function() {
        Ext.QuickTips.init();
        
        // setup the state provider, all state information will be saved to a cookie
        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    
        // 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'],
            ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
            ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
            ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
            ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
            ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
            ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
            ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
            ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
            ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
            ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
            ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
            ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
            ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
            ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
            ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
            ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
            ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
            ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
            ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
            ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
            ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
            ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
            ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
        ];
    
        /**
         * Custom function used for column renderer
         * @param {Object} val
         */
        function change(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '</span>';
            } else if (val < 0) {
                return '<span style="color:red;">' + val + '</span>';
            }
            return val;
        }
    
        /**
         * Custom function used for column renderer
         * @param {Object} val
         */
        function pctChange(val) {
            if (val > 0) {
                return '<span style="color:green;">' + val + '%</span>';
            } else if (val < 0) {
                return '<span style="color:red;">' + val + '%</span>';
            }
            return val;
        }
    
        // 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', {
            store: store,
            stateful: true,
            stateId: 'stateGrid',
            columns: [
                {
                    text     : 'Company',
                    width     : 500,
                    sortable : false,
                    dataIndex: 'company'
                },
                {
                    text     : 'Price',
                    width    : 75,
                    sortable : true,
                    renderer : 'usMoney',
                    dataIndex: 'price'
                },
                {
                    text     : 'Change',
                    width    : 75,
                    sortable : true,
                    renderer : change,
                    dataIndex: 'change'
                },
                {
                    text     : '% Change',
                    width    : 75,
                    sortable : true,
                    renderer : pctChange,
                    dataIndex: 'pctChange'
                },
                {
                    text     : 'Last Updated',
                    width    : 85,
                    sortable : true,
                    renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'
                },
                {
                    xtype: 'actioncolumn',
                    width: 50,
                    items: [{
                        icon   : '../shared/icons/fam/delete.gif',  // Use a URL in the icon config
                        tooltip: 'Sell stock',
                        handler: function(grid, rowIndex, colIndex) {
                            var rec = store.getAt(rowIndex);
                            alert("Sell " + rec.get('company'));
                        }
                    }, {
                        getClass: function(v, meta, rec) {          // Or return a class from a function
                            if (rec.get('change') < 0) {
                                this.items[1].tooltip = 'Hold stock';
                                return 'alert-col';
                            } else {
                                this.items[1].tooltip = 'Buy stock';
                                return 'buy-col';
                            }
                        },
                        handler: function(grid, rowIndex, colIndex) {
                            var rec = store.getAt(rowIndex);
                            alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));
                        }
                    }]
                }
            ],
            height: 350,
            width: 600,
            title: 'Array Grid',
            renderTo: 'grid-example',
            viewConfig: {
                stripeRows: true
            }
        });
    });
        </script>
    </body>
    </html>

  2. #2
    Sencha User
    Join Date
    Feb 2011
    Location
    USA
    Posts
    7

    Default

    I confirmed this bug still appear in 4.0.5

  3. #3
    Sencha - Services Team
    Join Date
    Aug 2007
    Posts
    98

    Default

    We have confirmed issues with the column resizing when the horizontal scroll bar is present and we have created a bug report for it.

Posting Permissions

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