My First ExtJS DataGrid Pt 5: The ColumnModel
OK, we're winding down to the end of this tutorial, with only a few key components left. Today we cover the ColumnModel, which is how we manage the initial layout of our ExtJS DataGrid. We've already covered initial setup, our paging query, and defined out DataStore (see related entry links at the bottom of the post).
First things first, let's instantiate the ColumnModel
// cm is our ColumnModel object
}]);
Next we'll define the layout of the first column in our grid
id: 'fname',
header: "First Name",
dataIndex: 'vcFirstName',
width: 120
}
}]);
Alright, pretty basic stuff here. We've placed an 'id' on this column. This allows you to later reference the column specifically for styling. We didn't really mark this one for a particular reason, we just did it to explain. Next we have the 'header', which is the text that appears in your column header at the top of your DataGrid. This is then followed by the 'dataIndex' to define the data column it is mapped to within your DataStore. Lastly we have the 'width' attribute, which speaks for itself.
There are several other possible attributes that are available to you here, most of which are fairly easy to grab from the ExtJS API. We'll cover a few more in our next tutorial, but for now we'll just complete the layout of the ColumnModel.
id: 'fname',
header: "First Name",
dataIndex: 'vcFirstName',
width: 120
},{
header: "Last Name",
dataIndex: 'vcLastName',
width: 120
},{
header: "Is Admin",
dataIndex: 'bIsAdministrator',
width: 40
},{
header: "Is Active",
dataIndex: 'bIsActive',
width: 40
},{
id: 'last',
header: "Last Login",
dataIndex: 'tsDateLastLogin',
width: 150
}]);
// by default columns are sortable
cm.defaultSortable = true;
The order you work in will be reflected in your final initial layout. Each column definition is contained in curly braces, separated by commas. Each attribute is also comma delimited, with the attribute name being un-quoted, while their values are quoted if string values and not if numeric. Also notice the double quotes around the 'header' values, but the single quotes around the others. I don't know if this is intentional, and haven't really tested it, but this is the way it was in all of the example files so I thought it best to stick with the convention. The last thing we did here was set a directive on the ColumnModel to state the the columns will be sortable by default.
Alright, now you have defined your ColumnModel. A few steps left to go just yet, like the grid itself, custom renderers, styles, and other things to give it a little more cowbell. We'll begin wrapping those up in our next edition. For those coming to the Nashville CFUG Scorpio Tour presentation tomorrow night I hope you'll flag me down and say high.
http://extjs-gwt.blogspot.com
See more about Extjs-gwt on eclipse.
I think this extjs-gwt article can help beginner to learn.
For example, I have data from server, with json store, I got them and fill the grid. But for project reason, I would to get (to know) the current index of the row I'm filling in the grid.
Have you an idea on how to do it ?
Are you looking for the index (datastore row number)? Or the record ID (unique record identifier)? And, at what point are you trying to get this information? Are you creating an EditorGrid and trying to know this info for the row you are editing?
Yes, I am looking for the index (datastore row number) when I fill it.
In my code source below, I would like to renderer an editIcon function where I need to know the index row (or record ID if possible) on that row.
var ds = new Ext.data.JsonStore({
url:'overview.jsp',
id: 'id',
totalProperty: 'total',
root: 'rows',
fields: [
{name: 'fromDateTime', type: 'date', dateFormat: 'j-n-Y h:i'},
{name: 'untilDateTime', type: 'date', dateFormat: 'j-n-Y h:i'},
{name: 'location'},
{name: 'missionStatusId'},
{name: 'editIcon'}
]
});
var cm = new Ext.grid.ColumnModel([
{header: "Date from", dataIndex: 'fromDateTime', renderer: Ext.util.Format.dateRenderer('d/m/Y H:i')},
{header: "Date to", dataIndex: 'untilDateTime', renderer: Ext.util.Format.dateRenderer('d/m/Y H:i')},
{header: "Location", sortable: false},
{header: "Status", dataIndex: 'missionStatusId'},
{renderer: editIcon, dataIndex: 'missionStatusId'}
]);
// example of editIcon renderer function
function editIcon(v){
indexRow = xxx; // here I need the index or record id ???
if ( v == 1 ) {
return '<a href="sign.html?id='+indexRow+'"><img src="images/signature.gif"></a>';
}
}
I hope my explaination is clear.
Thank you
Ok, renderers are easy.
function myRenderer ( value, meta, record, rowIndex, colIndex, store){
// Do whatever you need to do to come up with your return string
return somestring
}
Now all of those function arguments relate to whatever row the render is being performed on at the time, and are fairly self explanatory, except for 'meta' (which you'll rarely use). For more information, expand the setRenderer() method on the ColumnModel page of the Ext API:
http://extjs.com/deploy/dev/docs/?class=Ext.grid.C...
Hope that helps out. (Shameless plug) Our book ('Learning Ext JS') can help you figure a lot of these things out as well.
http://www.packtpub.com/learning-ext-js/book
Thank you very much ;-)