Dynamic grids anyone?

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],
i_total++
});
 
//data to be shown
Ext.each(vari.results,function(el,i){
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,
autoload:false,
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 ?>',
method:'POST'
})
});

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({
listeners:{
selectionchange: function(sm) {
if (sm.getCount()) {
grid.deli.enable();
} else {
grid.deli.disable();
}
}
}
});
 
// 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({
id:'gridin',
store: store,
loadMask:true,
cls:'inval',
colModel: cm,
sm:sm,
//title: 'In values',
stripeRows: true,
viewConfig:{forceFit:true},
//clicksToEdit:1,
height: 365,
width: 1080,
columnLines:true
});
 
store.load({params:{start:0, limit:10}});
grid.render('sample');

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! 🙂