buffered Grid and add Data dynamically

**cyberant** · 24 Jul 2012 11:44 PM

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>

**scottmartin** · 25 Jul 2012 5:18 AM

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

Scott.

**amitayh** · 28 Jul 2012 11:23 PM

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)

**grumpus** · 4 Oct 2012 7:05 AM

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();

**metalinspired** · 4 Oct 2012 8:38 AM

try doing it this way.

Code:

grid.getStore().add(item);
grid.getStore().sort();

**grumpus** · 4 Oct 2012 8:46 AM

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()

**metalinspired** · 4 Oct 2012 9:00 AM

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.

buffered Grid and add Data dynamically

Thread Tools

Search Thread

Display

Unanswered: buffered Grid and add Data dynamically

Unanswered: buffered Grid and add Data dynamically

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

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

Tags for this Thread