ext图片预览功能实现，前端代码

效果图：

 

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" >,
                '<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: 0;
    padding: 5px;
    height: 120px;
}
.x-view-item-focused {
    outline: 1px dashed #c0d4ed!important;
    outline-offset: -1px;
}