Dynamic grids anyone?

Featured Image

For my second 🙂 article I’m again writing about Ext.js. Ext.js has one great part for showing data – grids. These look really nice and you can style them pretty easily. It all works like a charm when you’re using them for static data. But what when things get dynamic? What when you don’t know the number of the headers that you need in the table and not just rows? Here’s where this article will help.

First lets input some data to our view(i used ajax requests). For the request I modeled my json so it has several parts: fields-name of the fields in table, results – data to be shown, and flag – is it input data our output(i had to make a sort of a spreadsheet where input and output data had to be separated.)

Since I used Array store I modeled my data into an array.

 var vari = Ext.util.JSON.decode(results.responseText);
//names of the fields
Ext.each(vari.fields, function(ell, ind) {
                names[ind] = vari.fields[ind],
//data to be shown
                values[i] = vari.results[i],
//input element count
Ext.each(vari.flag, function(el, i) {
                if (vari.flag[i] == "I") in_elem++;

Now that we got our data the way we want it we need to put it in a store:

var store = new Ext.data.ArrayStore({
                autoDestroy: true,
                data:values,                       //values need to be array of arrays if youre using ArrayStore
                totalProperty: vari.total,
                fields: names,                     // names is an array containing names of the fields
                proxy: new Ext.data.ScriptTagProxy({
                    url: 'proxylink ?>',

Now let’s prepare heading for our grid:

//array col has data needed for showing of the grid and inputing data in a grid: header and dataIndex 
var col=[];
Ext.each(names, function(el, i) {
                if (i + 1 == in_elem) {
                    col[i + 1] = {header:names[i], dataIndex: names[i],id:'end-row'};   //this gives the last input field an id so you can style it to separate the data
                else {
                    col[i + 1] = {header:names[i], dataIndex: names[i]};
//making a selection model
            var sm = new Ext.grid.CheckboxSelectionModel({
                    selectionchange: function(sm) {
                        if (sm.getCount()) {
                        } else {
            // making selection model the first column in the column model
            col[0] = sm;
            // adding the rest of the columns to the column model
            var cm = new Ext.grid.ColumnModel({
                columns: col,
                defaults:{sortable: true}

And now lets make our grid:

var grid = new Ext.grid.GridPanel({
                store: store,
                colModel: cm,
                //title: 'In values',
                stripeRows: true,
                height: 365,
                width: 1080,
store.load({params:{start:0, limit:10}});

And we’re done :). Our dynamic grid should be shown now. Everytime you make a new request you will be able to upload new set of data, regardles of the number of columns or rows. This grid can also be editable, but that’s another story.
Cheers! 🙂


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.