Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member minneyar's Avatar
    Join Date
    Apr 2009
    Location
    San Antonio, TX
    Posts
    35
    Vote Rating
    0
    minneyar is on a distinguished road

      0  

    Default In a grid with a fixed-width col and forceFit: true, hiding columns breaks rendering

    In a grid with a fixed-width col and forceFit: true, hiding columns breaks rendering


    Ext version tested:
    • Ext 3.3.1

    Adapter used:
    • prototype

    css used:
    • ext-all.css

    Browser versions tested against:
    • Chromium 12.0.700.0
    • FF3.6.15 (firebug 1.6.2 installed)

    Operating System:
    • Ubuntu Linux 10.10

    Description:
    • If you have a GridPanel whose viewConfig contains "forceFit: true" and it has a column width "fixed: true", if you hide all of the columns but the one with the fixed with, when you then un-hide any other column, the grid rendering breaks horribly.

    Test Case:

    This example is based on the official Array Grid example. The code has been modified to show off this particular bug.

    Code:
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Grid Example</title>
    
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    
    
        <style type=text/css>
            /* style rows on mouseover */
            .x-grid3-row-over .x-grid3-cell-inner {
                font-weight: bold;
            }
    
            /* style for the "buy" ActionColumn icon */
            .x-action-col-cell img.buy-col {
                height: 16px;
                width: 16px;
                background-image: url(../shared/icons/fam/accept.png);
            }
    
            /* style for the "alert" ActionColumn icon */
            .x-action-col-cell img.alert-col {
                height: 16px;
                width: 16px;
                background-image: url(../shared/icons/fam/error.png);
            }
    
        </style>
    
        <!-- ** Javascript ** -->
        <!-- ExtJS library: base/adapter -->
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    
        <!-- ExtJS library: all widgets -->
        <script type="text/javascript" src="../../ext-all.js"></script>
    
        <!-- overrides to base library -->
    
        <script type="text/javascript">Ext.onReady(function(){
        Ext.QuickTips.init();
    
        Ext.state.Manager.setProvider(new 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'],
        ];
    
        /**
         * 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 = new 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'}
            ]
        });
    
        // manually load local data
        store.loadData(myData);
    
        // create the Grid
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {
                    id       :'company',
                    header   : 'Company', 
                    width    : 160, 
                    sortable : true, 
                    dataIndex: 'company'
                },
                {
                    header   : 'Price', 
                    width    : 75, 
                    sortable : true, 
                    renderer : 'usMoney', 
                    dataIndex: 'price'
                },
                {
                    header   : 'Change', 
                    width    : 75, 
                    sortable : true, 
                    renderer : change, 
                    dataIndex: 'change'
                },
                {
                    header   : '% Change', 
                    width    : 75, 
                    sortable : true, 
                    renderer : pctChange, 
                    dataIndex: 'pctChange'
                },
                {
                    header   : 'Last Updated', 
                    width    : 85, 
                    sortable : true, 
                    renderer : Ext.util.Format.dateRenderer('m/d/Y'), 
                    dataIndex: 'lastChange'
                },
                {
                    xtype: 'actioncolumn',
                    fixed: true,
                    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 = 'Do not buy!';
                                return 'alert-col';
                            } else {
                                this.items[1].tooltip = 'Buy stock';
                                return 'buy-col';
                            }
                        },
                        handler: function(grid, rowIndex, colIndex) {
                            var rec = store.getAt(rowIndex);
                            alert("Buy " + rec.get('company'));
                        }
                    }]
                }
            ],
            stripeRows: true,
            //autoExpandColumn: 'company',
            height: 350,
            width: 600,
            title: 'Array Grid',
            // config options for stateful behavior
            stateful: true,
            stateId: 'grid',
            viewConfig: {
                forceFit: true
            }
        });
    
        // render the grid to the specified div in the page
        grid.render('grid-example');
    });
    </script>
    </head>
    <body>
        <h1>Grid Example</h1>
        <div id="grid-example"></div>
    </body>
    </html>
    Steps to reproduce the problem:
    • Click on the menu for the "Company" column header.
    • Hide every column except the last one (which has no header text).
    • Show any other column.
    • At this point, the grid rendering should be obviously broken.
    • Not only is it broken now, but the broken state persists through the cookie that saves the grid state, and it will continue to be broken after the page is reloaded, until the cookie is removed.

    The result that was expected:
    • The hidden columns should reappear and the grid should render normally.

    The result that occurs instead:
    • The space between grid columns is far too large. After reloading the page, there is no space at all, and grid column contents all run together.

    Screenshot or Video:
    • Attached; brokengrid1.jpg: The appearance of the grid after showing one of the previously hidden columns.
    • Attached; brokengrid2.jpg: The appearance of the grid after showing all columns and reloading the page.

    Debugging already done:
    • none

    Possible fix:
    • not provided

  2. #2
    Ext JS Premium Member minneyar's Avatar
    Join Date
    Apr 2009
    Location
    San Antonio, TX
    Posts
    35
    Vote Rating
    0
    minneyar is on a distinguished road

      0  

    Default


    Oops, I forgot to attach the screenshots...
    Attached Images

  3. #3
    Sencha User
    Join Date
    Dec 2009
    Location
    Dallas, TX
    Posts
    20
    Vote Rating
    0
    ramana_l_v is on a distinguished road

      0  

    Default


    I am facing similar problem, Is there a solution found for this ?

    Thanks in advance...

Similar Threads

  1. Editorgrid, width of columns and fixed:true
    By wuschba in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 22 Feb 2011, 6:30 AM
  2. Replies: 2
    Last Post: 2 Nov 2009, 1:56 AM
  3. Grid forceFit and fixed column width
    By John0 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 2 Mar 2009, 6:40 AM
  4. Grid 100% width with some columns with fixed width
    By marco76 in forum Ext 2.x: Help & Discussion
    Replies: 10
    Last Post: 18 Nov 2008, 6:19 AM

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi