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的帮助.不知道还有什么好的方法没?
- 大小: 110.8 KB
分享到:
- 2009-08-14 13:45
- 浏览 2429
- 评论(1)
- 论坛回复 / 浏览 (1 / 2361)
- 查看更多
相关推荐
打印预览增加书签与缩略图导航功能。 单色打印功能:报表预览彩色输出,打印输出采用黑白灰度打印。 画笔与线段的宽度可以更精细的设置到小数位,如0.25、0.5、1.5等,打印输出可以得到更精细的表格线。 实现单独...
这个示例中,我们创建了一个简单的图片浏览网站,其中包括一个...您可以根据需要添加图像缩略图、图像详情页面、滑动效果等功能来增强您的图片浏览网站。 希望这个示例对您有所帮助,祝您成功创建自己的图片浏览网站!
images-grid是一款仿Facebook图片画廊效果的jQuery插件。该jQuery图片画廊插件默认在图片数量超过5张的情况下,只显示...当用户点击图片缩略图时,会以全屏lightbox的方式显示图片,通过前后导航按钮来查看所有的图片。
images-grid是一款仿Facebook图片画廊效果的jQuery插件。该jQuery图片画廊插件默认在图片数量超过5张的情况下,只显示...当用户点击图片缩略图时,会以全屏lightbox的方式显示图片,通过前后导航按钮来查看所有的图片。
插件描述:images-grid是一款仿Facebook图片画廊效果的jQuery插件。...当用户点击图片缩略图时,会以全屏lightbox的方式显示图片,通过前后导航按钮来查看所有的图片。演示地址:http://www.jq22.com/jquery-info8816
几个月前,Twitter曾想(删除)删除图库中图像的缩略图的想法(不好)……“官方”解释是,它们是这种新显示的“实验”,并承诺很快会返回到此功能(请参阅https://dev.twitter.com/discussions/9538)......
该源码实现了一款简单的相册程序,该小应用实现了Grid View和Gallery两种浏览模式,主要我们点击后显示每张,左右滑动实现图片之间的切换。程序中应用了自定义的Adapter和通过文件路径加载图片,而且还可以左右滑动...
例如,当您在 Android 系统“最近的应用”界面左右滑动一个缩略图的时候,它会开始变淡。这样做就使得用户明白滑动可以移除这条记录。 边界 当用户试图滑出可滑动区域的范围时,应当在边界提供视觉的反馈。例如...
Bootstrap 缩略图 162 添加自定义的内容 163 Bootstrap 警告(Alerts) 167 可取消的警告(Dismissal Alerts) 168 警告(Alerts)中的链接 170 Bootstrap 进度条 172 默认的进度条 172 交替的进度条 173 条纹的...
Gallery :自动生成的缩略图以无限滚动的形式显示在CSS Grid上。 具有全屏切换功能的照片具有美丽的“明信片”视图。 两种视图都以最小的空白和精致的UX做出响应。 图像传递的许多性能优化(均由Gatsby进行,远远...