效果图：
extjs代码：
// 模型
Ext.define('ParkingAttachment', {extend: "Ext.data.Model",
idProperty: 'id',
fields:[
{name:'id'},
{name:'parkingId'},
{name:'attachment'},
{name:'attachmentName'},
{name:'attachmentUrl'}
]
}); // 存储
var parkingAttachmentStore = Ext.create('Ext.data.Store', {
model: 'ParkingAttachment',
autoLoad: true,
proxy: {
type: 'ajax',
actionMethods: {
read: "POST"
},
url: securedroot + 'squadron/getParkingAttachment',
reader: {
type: 'json'
}
}
}); // 面板
var attachmentPanel = Ext.create('Ext.Panel', {
id: 'images-view',
iconCls: 'silk-attach',
autoScroll: true,
frame: true,
margin: '-5 20 5 10',
height: 300,
title: '图片预览',
items: Ext.create('Ext.view.View', {
store: parkingAttachmentStore,
margin: '5 20 5 20',
tpl: [
'<tpl for=".">',
'<div class="thumb-wrap x-view-item-focused" id="{attachmentName}" style="height: 230px; margin:10px 35px 10px 35px;cursor:pointer;>',
'<div class="thumb"><img style="max-height: 220px;max-width: 275px;vertical-align:middle;" src="' + ORCH_SYSCONTANT.FILE_VIEW_URI + '{attachmentUrl}" title="{attachmentName}"></div>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>'
],
multiSelect: false,
trackOver: true,
itemSelector: 'div.thumb-wrap',
emptyText: '没有图片显示',
plugins: [
Ext.create('Ext.ux.DataView.DragSelector', {})
],
prepareData: function (data) {
Ext.apply(data, {
shortName: Ext.util.Format.ellipsis(data.attachmentName, 15),
});
return data;
},
listeners: {
itemclick: function (dv, nodes) {
var url = nodes.data.attachmentUrl;
window.open(ORCH_SYSCONTANT.FILE_VIEW_URI + url);
}
}
})
});
以下是上述代码中用到的变量：
// 国际化：
FILE_VIEW_URI: 'http://10.10.1.212:5980/sitefiles/lhzhzfpro/zf/file/'
// CSS样式
.thumb {
background-color: #ffffff;
border-radius: 3px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
margin-top: 30px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
width: 100%;
} #images-view .thumb-wrap {
border: 2px solid #EAEAEE;
float: left;
margin-right:;
padding: 5px;
height: 120px;
}
.x-view-item-focused {
outline: 1px dashed #c0d4ed!important;
outline-offset: -1px;
}