Edit in JSFiddle

    Ext.grid.CusTemplateColumn = Ext.extend(Ext.grid.TemplateColumn, {
    	constructor: function(cfg){
    	    Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg);
            var tpl = (!Ext.isPrimitive(this.tpl) && this.tpl.compile) ? this.tpl : new Ext.XTemplate(this.tpl);    
    
    	    this.renderer = function(value, p, r, rowIndex, colIndex){
                
                //第一種方法 
                var newData=Ext.apply({rowIndex: rowIndex, colIndex: colIndex}, r.data);
                return tpl.apply(newData);

                //第二種方法
                //r.data.rowIndex = rowIndex;
                //r.data.colIndex = colIndex;
                //return tpl.apply(r.data);

                //未修改前
                //return tpl.apply(r.data);
            };

            this.tpl = tpl;
    
    	}
    });


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 myTemplateColumn=new Ext.grid.CusTemplateColumn({ 
		header: "Rentals", 
		width: 225, 
		dataIndex: 'rentals', 
		sortable: true, 
		align: 'right', 
		tpl:template
		 
	});

	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 },
			myTemplateColumn
		 
	],
		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>