Ext.onReady(function() { var store = new Ext.data.ArrayStore({ fields: ['title', 'rentals', 'trend'], data: [['ACADEMY DINOSAUR', 305, 'up'], ['DRAGONFLY STRANGERS', 240, 'neutral'], ['FAMILY SWEET', 188, 'down'], ['FREAKY POCUS', 205, 'up'], ['GABLES METROPOLIS', 265, 'up']] }); var template = new Ext.XTemplate( '<span >{rentals} {[this.getTrendClass(values.trend)]}' + '<input type="checkbox" name="check{rowIndex}" id="checkbox" value="{title}"/>' + '</span>', { getTrendClass : function(trend) { var retValue = ''; switch (trend) { case 'down': retValue = 'trend-down'; break; case 'neutral': retValue = 'trend-neutral'; break; case 'up': retValue = 'trend-up'; break; default: retValue = 'trend-neutral'; break; } return retValue; } } ); template.compile(); var myColumn={ header: "Rentals", width: 225, dataIndex: 'rentals', sortable: true, align: 'right', renderer : function(value, p, r, rowIndex, colIndex){ r.data.rowIndex = rowIndex; r.data.colIndex = colIndex; return template.apply(r.data); } } var grid = new Ext.grid.GridPanel({ title: 'Movie rentals this month', store: store, columns: [ { id: 'title-col', header: "Title", width: 225, dataIndex: 'title', sortable: true }, myColumn ], autoExpandColumn: 'title-col', renderTo: Ext.getBody(), width: 450, height: 175, loadMask: true }); });
<!doctype html> <html> <head> <title>MessageBox</title> <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script> <link href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> </head> <body> <body style="padding: 20px"> </body> </html>