创建model
1 Ext.define('Keer.ext.model.ExPhotoContentDataViewModel',{ 2 extend: "Ext.data.Model", 3 fields:[ 4 {name:'id', type:'string'}, 5 {name:'name', type:'string'}, 6 {name:'width', type:'int'}, 7 {name:'height', type:'int'}, 8 {name:'url', type:'string'} 9 ] 10 });
创建dataView
1 //方法:生成图片dataView 2 createPhotoDataView:function(){ 3 var store = Ext.create('Ext.data.Store', { 4 model: 'Keer.ext.model.ExPhotoContentDataViewModel', 5 remoteSort: true, 6 proxy: { 7 type: 'ajax', 8 actionMethods: { 9 read: 'post' 10 }, 11 url: 'exhibitionManage!searchDataViewPhoto.action', 12 remoteFilter:true, 13 reader: { 14 type: 'json', 15 root: 'data', 16 successProperty: 'success' 17 } 18 } 19 }); 20 return Ext.create('Ext.view.View', { 21 store: Ext.data.StoreManager.lookup(store), 22 tpl: new Ext.XTemplate( 23 '<tpl for=".">', 24 '<div class="thumb-wrap">', 25 '<div class="thumb"><div class="thumb_img"><img width=45 height=60 src="{url}"></div></div>', 26 '<span class="x-editable">{name}</span></div>', 27 '</tpl>' 28 ), 29 id: 'images-view', 30 overClass: 'x-view-over', 31 itemSelector: 'div.thumb-wrap', 32 height:200, 33 border:true, 34 autoScroll: true, 35 multiSelect: false, 36 emptyText: '无照片信息', 37 loadingText: '加载中...', 38 //提前渲染显示数据 39 // prepareData: function(data){ 40 // data.name = Ext.util.Format.ellipsis(data.name, 4); 41 // return data; 42 // }, 43 listeners: { 44 'itemdblclick': Ext.bind(this.onPhotoDblClick, this) 45 } 46 }); 47 },
后台数据组织
1 /** 2 * 图片信息dataview获取预览数据 3 * @throws Exception 4 */ 5 public void searchDataViewPhoto() throws Exception{ 6 AttachmentService attachmentService = serviceFactory.create(AttachmentService.class); 7 8 List<Map<String, Object>> photoData = new ArrayList<Map<String, Object>>(); 9 10 String jsonResponse = ""; 11 12 if (StringUtils.isNotBlank(fileUploadTemp)) { 13 String[] arrayAttachId = fileUploadTemp.split(","); 14 15 Integer index = 1; 16 for (String attachId : arrayAttachId) { 17 Attachment temp = attachmentService.findById(Attachment.class, attachId); 18 if (null!=temp) { 19 //根据model来组织数据形式并用map封装 20 Map<String, Object> photoMap = new HashMap<String, Object>(); 21 photoMap.put("id",temp.getId()); 22 photoMap.put("name", "预览图片" + index); 23 photoMap.put("width", 500); 24 photoMap.put("height", 400); 25 photoMap.put("url", SystemSettingsHelper.getString("fileRootUrl") + temp.getSavePath()); 26 photoData.add(photoMap); 27 index++; 28 } 29 } 30 31 String jsonString = JsonHelper.getInstance().objectToJsonString(photoData); 32 jsonResponse = JsonHelper.getInstance().success(jsonString); 33 34 }else { 35 jsonResponse = JsonHelper.getInstance().success(); 36 } 37 this.response(jsonResponse); 38 39 }