1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    3
    Vote Rating
    0
    stijnster is on a distinguished road

      0  

    Default Buffered scrolling grid inside panel, no scrolling?

    Buffered scrolling grid inside panel, no scrolling?


    Dear Ext community,

    I was very happy when Ext 4 was released...what a fine piece of work! Thank you for that!

    I was especially happy with the new buffered scrolling grid. The problem however, is that I can't get it to scroll when I use it inside a panel. It also acts a bit weird when clicking on a row, since that makes the title dissapear.

    I modified the buffer-grid.js example file to illustrate the problem. I am probably doing somethnig totally wrong here, so I'm hoping you can help me out.
    Code:
    Ext.Loader.setConfig({enabled: true});
    
    Ext.Loader.setPath('Ext.ux', '../ux/');
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.grid.PagingScroller'
    ]);
    
    Ext.onReady(function(){
        /**
         * Returns an array of fake data
         * @param {Number} count The number of fake rows to create data for
         * @return {Array} The fake record data, suitable for usage with an ArrayReader
         */
        function createFakeData(count) {
            var firstNames   = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
                lastNames    = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
                ratings      = [1, 2, 3, 4, 5],
                salaries     = [100, 400, 900, 1500, 1000000];
    
            var data = [];
            for (var i = 0; i < (count || 25); i++) {
                var ratingId    = Math.floor(Math.random() * ratings.length),
                    salaryId    = Math.floor(Math.random() * salaries.length),
                    firstNameId = Math.floor(Math.random() * firstNames.length),
                    lastNameId  = Math.floor(Math.random() * lastNames.length),
    
                    rating      = ratings[ratingId],
                    salary      = salaries[salaryId],
                    name        = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
    
                data.push({
                    rating: rating,
                    salary: salary,
                    name: name
                });
            }
            return data;
        }
    
        Ext.define('Employee', {
            extend: 'Ext.data.Model',
            fields: [
               {name: 'rating', type: 'int'},
               {name: 'salary', type: 'float'},
               {name: 'name'}
            ]
        });
    
    
        // create the Data Store
        var store = Ext.create('Ext.data.Store', {
            id: 'store',
            pageSize: 50,
            // allow the grid to interact with the paging scroller by buffering
            buffered: true,
            // never purge any data, we prefetch all up front
            purgePageCount: 0,
            model: 'ForumThread',
            proxy: {
                type: 'memory'
            }
        });
    
    
    
        var grid = Ext.create('Ext.grid.Panel', {
            layout:'fit',
            title: 'Bufffered Grid of 5,000 random records',
            store: store,
            verticalScroller: {
                xtype: 'paginggridscroller',
                activePrefetch: false
            },
            loadMask: true,
            disableSelection: true,
            invalidateScrollerOnRefresh: false,
            viewConfig: {
                trackOver: false
            },
            // grid columns
            columns:[{
                xtype: 'rownumberer',
                width: 40,
                sortable: false
            },{
                text: 'Name',
                flex:1 ,
                sortable: true,
                dataIndex: 'name'
            },{
                text: 'Rating',
                width: 125,
                sortable: true,
                dataIndex: 'rating'
            },{
                text: 'Salary',
                width: 125,
                sortable: true,
                dataIndex: 'salary',
                align: 'right',
                renderer: Ext.util.Format.usMoney
            }]
        });
    
        var panel = Ext.create('Ext.panel.Panel',{
          width: 700,
          height: 500,
          title:'Test buffer grid',
          items:[grid],
          renderTo:Ext.getBody()
        });
        
        var data = createFakeData(5000),
            ln = data.length,
            records = [],
            i = 0;
        for (; i < ln; i++) {
            records.push(Ext.ModelManager.create(data[i], 'Employee'));
        }
        store.cacheRecords(records);
    
        store.guaranteeRange(0, 49);
    });
    Thank you in advance.

    Stijn

    Edit: I used chrome 11.0.696.60 and Firefox 3.6.17 to test this.
    Last edited by stijnster; 5 May 2011 at 12:46 AM. Reason: Added browser version

  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


    Try moving the layout: 'fit' config from the grid panel, to the panel you're adding the grid to. That way, the panel will layout the child grid to fit within it.

    stevil

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    3
    Vote Rating
    0
    stijnster is on a distinguished road

      0  

    Default


    Thank you stevil,

    It's fixed now.

  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


    No problem - layouts can be confusing in the beginning in terms of which options to put where.

    Good rule of thumb - if you're creating a Component, and you are putting other things inside that Component, put a layout on it. If you don't, you get 'auto', which just tacks children one after another inside. No auto-sizing.

    stevil

Similar Threads

  1. List inside Card Panel not scrolling all the way down
    By mindstuff in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 9 Aug 2011, 9:31 PM
  2. Scrolling problem with two hidden FormPanels inside a parent Panel
    By treadmill in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 26 Apr 2010, 8:28 AM
  3. Adding too many panel to a Scrolling Tabpanel. The scrolling icon disappear
    By tomchen1000 in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 20 Mar 2008, 4:26 AM

Thread Participants: 1

Tags for this Thread