Extjs 多图片上传 并有图片预览功能

来源:互联网 发布:ps切图软件 编辑:程序博客网 时间:2024/05/16 13:44
imagePanel = Ext.extend(Ext.Panel, {_form : null,_grid : null,_tree : null,_panel:null,constructor : function(_config) {if (_config == null) {_config = {};}Ext.apply(this, _config);this._url = this.upload_url;  this.store = new Ext.data.ArrayStore({autoLoad : {start : 0,limit : basicConstant.LIMIT},pageSize : basicConstant.LIMIT,proxy : {type : 'ajax',url : "sys/file-info-manage.action?refGuId="+this._refGuId,reader : {type : 'json',root : 'rows',totalProperty : "totalCount"}},model : 'FileInfo'    });           var tpl = new Ext.XTemplate(     '<table cellpadding=0 cellspacing=0 border=1 width=400px>',                  '<tr><th>名称:</th><th>位置</th> <th>预览</th></tr>',           '<tpl for=".">',         '<tr><td>{fileName}</td><td>{first}</td><td><img src="{filePath}" height="40" width="60" title="{name}"></td></tr>',    '</tpl>',               '</table>',    '<div class="x-clear"></div>'    );_config._grid = this._grid ;imagePanel.superclass.constructor.call(this, {title : this._title, id:'images-view',width : 800,height : 456,    frame:true,    autoWidth:true,    autoHeight:true,    collapsible:true,    layout:'fit',    title:'Simple DataView',    items: [            new Ext.DataView({        store: this.store,        tpl: tpl,autoHeight:true,multiSelect: true,overClass:'x-view-over',        itemSelector:'div.thumb-wrap',        emptyText: 'No images to display'                   })] ,dockedItems : [ {dock : 'bottom',xtype : 'pagingtoolbar',store : this["store"],displayInfo : true}, {dock : 'top',xtype : 'toolbar',items : [ {text : "上传附件",id : 'BT_FILEINFO_UPLOAD',handler : this.onUploadHandler,scope : this}, "-", {text : "删除",id : 'BT_FILEINFO_DEL',handler : this.onDelHandler,scope : this} ]} ],listeners : {'itemdblclick' : {fn : function(_view,_record,_item) {var url = 'sys/file-info-manage!download.action?guId=' + _record.get('guId');window.open(url);},scope : this}}});},onUploadHandler : function(){var url = this._url;var store = this.store;var _win = new FileUploadWin( {_fileInfoGrid : this,callBack : function(){store.load();},file_post_name : 'file',post_params : {savePath:'temp\\'},file_types : '*.*',upload_url : url}).show();},onDelHandler : function(){var _guIds  = getGridValues(this,'guId');var _grid = this;askMesg({msg : '确定删除?',fn : function(btn, text){if (btn == 'ok') {ajaxRequest( {url : 'sys/file-info-manage!delete.action',params : {guIds : _guIds},callBack : function(returnData) {_grid.store.load();}});}}});},selectionChange : function() {var selectedCount = this.getSelectionModel().getSelection().length;if (selectedCount == 0) {this.setBtStatus();} else if (selectedCount == 1) {this.setBtStatus('single');} else {this.setBtStatus('multi');}},setBtStatus : function(type) {switch (type) {case "single": {Ext.getCmp('BT_FILEINFO_UPLOAD').enable();Ext.getCmp('BT_FILEINFO_DEL').enable();break;}case "multi": {Ext.getCmp('BT_FILEINFO_UPLOAD').enable();Ext.getCmp('BT_FILEINFO_DEL').enable();break;}default: {Ext.getCmp('BT_FILEINFO_UPLOAD').enable();Ext.getCmp('BT_FILEINFO_DEL').disable();break;}}}});