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

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