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;
}
}
}
});
Extjs 多图片上传 并有图片预览功能
最新推荐文章于 2016-09-27 11:38:00 发布