ExtJS 4 Iterate through Grid Rows

• Tweet

• Tweet

Hello,

In this post I will show you how you can iterate through the rows in your Grid. There are many reason why you may want to do that. To explain it better I will take an example grid and will use console.log() output to show iterated rows output.

The Markup

<div  style="margin:50px">
       <div id="iteration"></div>
       <a href="#iterate" id="iterateit">Iterate</a>
       <div id="objectvals">&nbsp;</div>
</div>

The Ext Grid

Consider this Array for our Grid

var names = [
    ['Tom'],
    ['Harry'],
    ['Arnold']
];

Now lets create a Store from the above array

var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'name'}
        ],
        data:names
    });

Advertisement

The Grid

var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            {
                text     : 'Favorite Names',
                flex     : 1,
                dataIndex: 'name'
            }
        ],
        height: 350,
        width: 400,
        title:'Iteration example',
        renderTo: 'iteration',
        stateful: false
    });

Now that we have our grid ready with our store we can do this to iterate through all rows. We have to keep in mind that Grid’s data source is our store which is getting its data from the array we declared earlier. Basically we will be iterating on store

lets see how this is accomplished

The Iterator

ExtJS Store’s each method which is explained here

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-each

Code

Ext.get("iterateit").on('click',function(){
          grid.store.each(function(rec){
               html = Ext.get("objectvals").dom.innerHTML;
               Ext.get("objectvals").dom.innerHTML = html+'
'+rec.data.name;     
        });      
    });

When we use each method The Record is passed as the first parameter. As we see in the above code snippet that rec will have the current row.

Demo

Demo can be found here

http://jaspreetchahal.org/examples/extjs-grid-iteration.html

You can view source of the above page to see how I did it. Try clicking the button so that iteration kicks off.

I hope that this helps you in one way or another

While I am still working with ExtJS there are few more posts that I will be doing in next few days. These are really basic things but very handy to know. For complete guide you should always refer to ExtJS documentation because that the optimal resource to learn Ext

Cheers

Advertisement