1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    8
    Vote Rating
    0
    sureshmalankar is on a distinguished road

      0  

    Default Grid does not display scrollbars when placed inside ViewPort

    Grid does not display scrollbars when placed inside ViewPort


    I have this gridpanel inside a viewport that fails to showup the scrollbars. The same grid displays the scrollbars as it should when rendered outside of the viewport. I am posting an example. The code of the grid is nothing but what I got from the basic grid example that comes with the documentation. If someone can tell me the reason it would be great. I have been breaking my head the whole of last week over this.

    Here is the code for the grid which I have placed in a separate file called test.js which I include in the html file.

    Code:
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.state.*'
    ]);
    
    
    // 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,
            columnLines: true,
            columns: [
                {
                    text     : 'Company',
                    flex     : 1,
                    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
            }
        });
    And here is the code for the index.html page. Nothing fancy. Just a plain viewport where I display the grid inside the center zone.

    Code:
    <html>
    <head>
        <title>Pay Portfolio</title>
        <link rel="stylesheet" type="text/css" href="ext-4.0-beta3/resources/css/ext-all-debug.css"/>
        <script type="text/javascript" src="ext-4.0-beta3/ext-all.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <script type="text/javascript" src="js/test.js"></script>
        <script type="text/javascript">
            Ext.onReady(function() {
                
                Ext.create('Ext.Viewport', {
                    layout:'border',
                    items: [
                        {
                            region: 'north',
                            xtype: 'panel',
                            html: 'North'
                        },
                        {
                            region: 'west',
                            xtype: 'panel',
                            split: true,
                            width: 200,
                            html: 'West'
                        },
                        {
                            region: 'center',
                            xtype: 'panel',
                            layout:'fit',
                            items:[grid]
                        },
                        {
                            region: 'east',
                            xtype: 'panel',
                            split: true,
                            width: 200,
                            html: 'East'
                        },
                        {
                            region: 'south',
                            xtype: 'panel',
                            html: 'South'
                        }
                    ]
                });
            });
        </script>
    </head>
    
    
    <body>
    <div id="grid-example"></div>
    </body>
    </html>

  2. #2
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    Have you tried autoScroll: true on your panel config? your layout is clean and you've specified a layout for the grid's container - the only thing I can think of is autoScroll.

    stevil

  3. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    8
    Vote Rating
    0
    sureshmalankar is on a distinguished road

      0  

    Default


    The point is I don't want the container panel to show scrollbars. Rather the grid should show the scrollbars, which it does if I take it out of the viewport and render it in a <div>. The code that I have included is just an example. In my real application, the grid needs to be a part of a tabpanel placed inside the viewport.

  4. #4
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    I'm sorry I wasn't clear - I meant autoScroll on the grid Panel config, not on the config of its parent.

  5. #5
    Sencha User
    Join Date
    Oct 2010
    Posts
    8
    Vote Rating
    0
    sureshmalankar is on a distinguished road

      0  

    Default


    Adding autoScroll:true to the grid doesn't make any difference. While using Ext JS 3 I didn't have this problem.

    Any other suggestions?

  6. #6
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    As a diagnostic, can you hook an event (like your store's load event, or something like that), and try

    PHP Code:
        yourGridPanel.invalidateScroller(); 
    ? I had some problems with applying filters to a BufferStore, and doing that on store load made the problem go away.

    stevil

  7. #7
    Sencha User
    Join Date
    Oct 2010
    Posts
    8
    Vote Rating
    0
    sureshmalankar is on a distinguished road

      0  

    Default


    I have never ever used the invalidateScroller method before and frankly I don't know what it does and how to use it. But then again, I can't understand why it does not work as the code stands. Could this be a bug in ExtJs itself? Because, as far as I can see, the code looks perfectly alright. Merely moving the grid outside the viewport brings up the scrollbars. . I have wasted so many hours trying to fix this.

    I am sure someone in the forum must have an answer.

  8. #8
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    It definitely could be a bug, because your config is so simple. Not my call, of course. invalidateScroller causes the grid to recalculate its scroller position/size/necessity.

    stevil

  9. #9
    Sencha User
    Join Date
    Oct 2010
    Posts
    8
    Vote Rating
    0
    sureshmalankar is on a distinguished road

      0  

    Default


    @stevil : thanks for trying to help me out. Actually I have one more problem associated with the grid. When I add a new record to the grid (obviously, through the store), the grid does not resize the height to show the new record even when it has the space to do so. I assume that it is linked to the scrollbar issue. Probably, when the scrollbar issue gets resolved (hopefully soon), the other problem would also get resolved. But this has started to get on my nerves. I try my best to ignore it and concentrate on the other part of my application, but time and again I keep coming back to this in the hope that I can find a solution (even if it is a hack).

  10. #10
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    @sureshmalankar - no problem! During this process I've had to put to bed numerous issues awaiting the completion of the product, and it really gets under your skin to know you have all this stuff to work on that you have to defer, or hack around. I guess that's the price of early adoption, and it's worth it to me, but I have days...

    as for adding a record to the store - my guess is one of two things - 1) you need to call a method i don't know about on the store, or 2) the store should be notifying the view but isn't? I might post that specifically as a bug - I posted the invalidateScroller with filtering one myself.

    stevil

Similar Threads

  1. Replies: 4
    Last Post: 2 Nov 2010, 11:33 PM
  2. Replies: 3
    Last Post: 16 Apr 2009, 7:17 AM
  3. Viewport Scrollbars
    By badgerd in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 15 Oct 2008, 10:05 PM
  4. Problem of rendering of scrollbars of grid inside tabpanel
    By mani_novice in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 13 Jul 2008, 8:37 PM
  5. How to make a grid NOT to use ScrollBars inside a nestedlayout?
    By memph in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 27 Jul 2007, 8:00 AM

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar