1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    4
    Vote Rating
    0
    cyberant is on a distinguished road

      0  

    Default Unanswered: buffered Grid and add Data dynamically

    Unanswered: 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,154
    Vote Rating
    475
    Answers
    685
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      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
    amitayh is on a distinguished road

      0  

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

    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
    grumpus is on a distinguished road

      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
    Vote Rating
    4
    Answers
    4
    metalinspired is on a distinguished road

      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
    grumpus is on a distinguished road

      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
    Vote Rating
    4
    Answers
    4
    metalinspired is on a distinguished road

      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.