grid 显示缩略图问题

[img]/upload/attachment/135856/ad0e6aaf-e0e8-3622-baa3-2febb2295dbf.bmp[/img]

function thumbnail (data, metadata, record, rowIndex, columnIndex, store){
				var url = store.getAt(rowIndex).get('bannerUrl');
				var fileName = store.getAt(rowIndex).get('fileName');
				//qtitle标题 qtip:内容
				var img = "<img src='"+url+"/"+fileName+ "' width='300' height='200'>";
			    var displayText  = '<div ext:qtitle="" ext:qtip="'+img+'">'+data+'</div>';  
			   return displayText;  
			}

var cm = new Ext.grid.ColumnModel(
					 [
					 new Ext.grid.RowNumberer(),//自动行号
					  sm,//自动行号
					{
					    header:"文件名",
						dataIndex:'fileName',
						width:135,
						locked:true,
						menuDisabled: true,
						sortable: true,
						renderer:thumbnail
					},{
					    header:"文件类型",
						dataIndex:'leaf',
						width:93,
						locked:true,
						menuDisabled: true,
						sortable: true,
						renderer:thumbnail
					},{
						header:"修改时间",
						dataIndex:'lastModifyDate',
						width:140,
						locked:true,
						menuDisabled: true,
						sortable: true,
						renderer:thumbnail
					},{
						header:"图片尺寸",
						dataIndex:'imgSize',
						width:150,
						locked:true,
						menuDisabled: true,
						sortable: true,
						renderer:thumbnail
					},{
						header:"大小",
						dataIndex:'fileSize',
						width:80,
						locked:true,
						menuDisabled: true,
						sortable: true,
						renderer:thumbnail
					},{
						header:"缩略图",
						width:120,
						locked:true,
						menuDisabled: true,
						sortable: false,
						dataIndex:'bannerId',
						renderer: function(data, metadata, record, rowIndex, columnIndex, store) {
								var url = store.getAt(rowIndex).get('bannerUrl');
								var fileName = store.getAt(rowIndex).get('fileName');
							    return '<div class="controlBtn">' +
							    		'<img src="'+url+'/'+fileName+'"' +
							    		' width="16" height="16"' +
							    		' ></div>';
						} 
					}]);

感觉这个方法并不是很好,因为每一列都写了renderer:thumbnail,显示图片的时候也比较慢,谢谢yourgame的帮助.不知道还有什么好的方法没?