dataView显示图片(自己项目里的)

创建model

Ext.define('Keer.ext.model.ExPhotoContentDataViewModel',{
    extend: "Ext.data.Model",
    fields:[
        {name:'id', type:'string'},
        {name:'name', type:'string'},
        {name:'width', type:'int'},        
        {name:'height', type:'int'},
        {name:'url', type:'string'}
    ]
});

 

创建dataView

//方法:生成图片dataView
    createPhotoDataView:function(){
         var store = Ext.create('Ext.data.Store', {
            model: 'Keer.ext.model.ExPhotoContentDataViewModel',
            remoteSort: true,
            proxy: {
                type: 'ajax',
                actionMethods: {
                    read: 'post'
                },
                url: 'exhibitionManage!searchDataViewPhoto.action',
                remoteFilter:true,        
                reader: {
                    type: 'json',
                    root: 'data',
                    successProperty: 'success'
                }
            }
        });
         return Ext.create('Ext.view.View', {
            store: Ext.data.StoreManager.lookup(store),
            tpl: new Ext.XTemplate(
                '<tpl for=".">',
                    '<div class="thumb-wrap">',
                    '<div class="thumb"><div class="thumb_img"><img width=45 height=60 src="{url}"></div></div>',
                    '<span class="x-editable">{name}</span></div>',
                '</tpl>'
            ),
            id: 'images-view',
            overClass: 'x-view-over',
            itemSelector: 'div.thumb-wrap',
            height:200,
            border:true,
            autoScroll: true,
            multiSelect: false,
            emptyText: '无照片信息',
            loadingText: '加载中...',
            //提前渲染显示数据
//            prepareData: function(data){
//                data.name = Ext.util.Format.ellipsis(data.name, 4);
//                return data;
//            },
            listeners: {
                'itemdblclick': Ext.bind(this.onPhotoDblClick, this)
            }            
        });
    },

后台数据组织

/**
     * 图片信息dataview获取预览数据
     * @throws Exception
     */
    public void searchDataViewPhoto() throws Exception{
        AttachmentService attachmentService = serviceFactory.create(AttachmentService.class);
        
        List<Map<String, Object>> photoData = new ArrayList<Map<String, Object>>();
        
        String jsonResponse = "";
        
        if (StringUtils.isNotBlank(fileUploadTemp)) {
            String[] arrayAttachId = fileUploadTemp.split(",");
            
            Integer index = 1;
            for (String attachId : arrayAttachId) {
                Attachment temp = attachmentService.findById(Attachment.class, attachId);
                if (null!=temp) {
                    //根据model来组织数据形式并用map封装
                    Map<String, Object> photoMap = new HashMap<String, Object>();
                    photoMap.put("id",temp.getId());
                    photoMap.put("name", "预览图片" + index);
                    photoMap.put("width", 500);
                    photoMap.put("height", 400);
                    photoMap.put("url", SystemSettingsHelper.getString("fileRootUrl") + temp.getSavePath());
                    photoData.add(photoMap);
                    index++;
                }
            }
            
            String jsonString = JsonHelper.getInstance().objectToJsonString(photoData);
            jsonResponse = JsonHelper.getInstance().success(jsonString);
            
        }else {
            jsonResponse = JsonHelper.getInstance().success();
        }
        this.response(jsonResponse);
        
    }