Results 1 to 7 of 7

Thread: buffered Grid and add Data dynamically

  1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    4
    Vote Rating
    0
      0  

    Default buffered Grid and add Data dynamically

    Hello,
    i want a buffered Grid and change the data of the grid later on runtime for example when the user presses a button. I can add the data normaly with the store.add function but this doesnt seem to use the buffer(loads to long), also store.reconfigure doesnt seem to use the buffer in extjs 4.1.1 (in 4.1.0 it seems to use the buffer but the data appears only after clicking the scrollbar of the grid) - can someone help me?
    Ive created a test to reproduce the problem (from your sample page) - please look at the AddData function:

    Code:
    <html>
    <head>
        <title>Ext JS Calendar Sample</title>
        <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
        
        <script type="text/javascript" src="ext-all-debug.js"></script>
    
    
        <script type="text/javascript">
    
    
    Ext.Loader.setConfig({enabled: true});
    
    
    Ext.Loader.setPath('Ext.ux', '../ux/');
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.grid.PagingScroller'
    ]);
    
    
    Ext.define('Employee', {
        extend: 'Ext.data.Model',
        fields: [
           {name: 'rating', type: 'int'},
           {name: 'salary', type: 'float'},
           {name: 'name'}
        ]
    });
    
    
    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
         */
    
    
    
    
        // Create the Data Store.
        // Because it is buffered, the automatic load will be directed
        // through the prefetch mechanism, and be read through the page cache
        var store = Ext.create('Ext.data.Store', {
            id: 'store',
            // allow the grid to interact with the paging scroller by buffering
            buffered: true,
            // Configure the store with a single page of records which will be cached
            pageSize: 5000,
            //data: createFakeData(5000),
            data: [],
            model: 'Employee',
            proxy: {
                type: 'memory'
            }
        });
    
    
        var grid = Ext.create('Ext.grid.Panel', {
            id: "testgrid",
            width: 700,
            height: 500,
            title: 'Bufffered Grid of 5,000 random records',
            store: store,
            loadMask: true,
            selModel: {
                pruneRemoved: 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
            }],
            renderTo: Ext.getBody()
        });
    });
        
        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;
        }
        
        function AddData()
        {
            alert("start");
            //Ext.getCmp("testgrid").store.add(createFakeData(5000));//does not work with buffer
            
            var store = Ext.create('Ext.data.Store', {
                id: 'store2',
                // allow the grid to interact with the paging scroller by buffering
                buffered: true,
                // Configure the store with a single page of records which will be cached
                pageSize: 5000,
                data: createFakeData(5000),
                model: 'Employee',
                proxy: {
                    type: 'memory'
                }
            });
            //Ext.getCmp("testgrid").store = store;//does not work
            
            Ext.getCmp("testgrid").reconfigure(store);//does not work with buffer
            
            Ext.getCmp("testgrid").doLayout();
            //Ext.getCmp("testgrid").scrollBy(0, 200, false);
            //Ext.getCmp("testgrid").setHeight(200);
            //Ext.getCmp("testgrid").getStore().loadRecords(store.getRange());
            
            
            alert("ende");
            //window.setTimeout("Hinweis2()", 2000);
        }
        
        window.setTimeout("AddData()", 1000);
        
        </script>
    </head>
    <body>
    </body>
    </html>

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,390
    Answers
    716
    Vote Rating
    498
      0  

    Default

    Please format your code using [ code ] [ /code ] blocks (no spaces)

    Scott.

  3. #3
    Sencha User
    Join Date
    Feb 2009
    Posts
    20
    Vote Rating
    0
      0  

    Default I also need to change data dynamically with buffered grid...

    A few other things I noticed - the row class disappears when scrolling (viewConfig: getRowClass), the grid won't show any data if the number of records is too small and no scrolling is required (I'm using a buffered grid because I don't know in advance how many records will be loaded)

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    6
    Vote Rating
    0
      0  

    Default

    I also noticed this behavior in ExtJS 4.1.1a

    I try to add an item and update the store thusly, but the grid associated with the store doesn't react in any way.

    Code:
    buffered_store.add(item_data);                
    buffered_store.update();

  5. #5
    Sencha User metalinspired's Avatar
    Join Date
    Apr 2012
    Posts
    98
    Answers
    4
    Vote Rating
    4
      0  

    Default

    try doing it this way.
    Code:
    grid.getStore().add(item);
    grid.getStore().sort();

  6. #6
    Sencha User
    Join Date
    Nov 2011
    Posts
    6
    Vote Rating
    0
      0  

    Default

    Thanks, metalinspired, that works.

    Using the following also works:
    Code:
    store.add(data);
    store.reload();
    I'm not sure which solution is most future-proof, perhaps the one with .sort()

  7. #7
    Sencha User metalinspired's Avatar
    Join Date
    Apr 2012
    Posts
    98
    Answers
    4
    Vote Rating
    4
      0  

    Default

    If your store is in charge of synchronising with database (and that is usual approach) I think you're safe using .sort() since there is no need to reload data.

Tags for this Thread

Posting Permissions

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