grid 显示缩略图问题

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的帮助.不知道还有什么好的方法没?

评论

1 楼 atian25 2009-08-14  

引用

因为每一列都写了renderer:thumbnail,显示图片的时候也比较慢

慢么... 这个渲染方式应该算是很优雅了.
添加的html标签不多, 显示图片慢只能算是你的网速.可以通过firebug的网络项来观察.


tip还有一种共享的方法,不过要3.0.

具体看:

http://atian25.iteye.com/blog/417361

用tooltip的delegate属性, 这样你就只需要new一个tooltip的对象就ok了.
不过其实Ext.QuickTips也只是一个对象.