Ext.onReady(function(){
Ext.QuickTips.init();
var store = new Ext.data.JsonStore({
url: '/RTXWH/servlet/DataViewImages',
root: 'images',
fields: ['name', 'url', {name:'size', type: 'float'}]
});
store.load();
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{url}" title="{name}"></div>',
'<span class="">{shortName}</span>',
'<span>{sizeString}</span>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>'
);
var customEl;
var ResizableExample = {
init: function(){
var custom = new Ext.Resizable('custom', {
wrap:true,
pinned:true,
minWidth:50,
minHeight: 50,
preserveRatio: true,
handles: 'all',
draggable:true,
dynamic:true
});
customEl = custom.getEl();
document.body.insertBefore(customEl.dom, document.body.firstChild);
customEl.on('dblclick', function(){
customEl.hide(true);
});
customEl.hide();
}
};
Ext.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);
var dataview = new Ext.DataView({
store: store,
id: "dv",
tpl: tpl,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display',
plugins: [
new Ext.DataView.DragSelector()
],
prepareData: function(data){
data.shortName = Ext.util.Format.ellipsis(data.name, 15);
data.sizeString = Ext.util.Format.fileSize(data.size);
return data;
},
listeners: {
selectionchange: {
fn: function(dv,nodes){
var l = nodes.length;
var s = '';
panel.setTitle('图片列表 ('+l+' 项'+s+' 被选中)');
}
},
'dblclick': function(){
var selNode = dataview.getSelectedNodes()[0];
var i = document.getElementById("custom");
i.src = "Upload/" + selNode.id;
customEl.center();
customEl.show(true);
}
}
});
var panel = new Ext.Panel({
id:'images-view',
frame:true,
width:535,
autoHeight:true,
collapsible:true,
layout:'fit',
title:'图片列表(0 项 被选中)',
tbar:[
{text: "添加图片", handler: insertImages}, "-",
{text: "删除图片", handler: deleteImages}
],
butttonAlign: "left",
tools: [{
id:"refresh",
qtip:"刷新图片列表",
on:{click:function(){
panel.body.mask("加载中...", 'x-mask-loading');
setTimeout(function(){
store.reload();
panel.body.unmask();
}, 1000);
}
}
}],
items: dataview
});
panel.render(Ext.getBody());
function insertImages()
{
dialog = new Ext.ux.UploadDialog.Dialog({
url: '/RTXWH/servlet/Upload',
width : 450,
height : 300,
minWidth : 450,
minHeight : 300,
draggable : true,
resizable : true,
modal: true,
reset_on_hide: false,
allow_close_on_upload: false,
upload_autostart: false
});
dialog.show('show-button');
}
function deleteImages()
{
var count = dataview.getSelectionCount();
var nodes = "";
if(count == 0)
{
Ext.Msg.show({
title:"提示框",
msg:"请选择要删除的图片",
buttons:Ext.MessageBox.OK ,
icon:Ext.MessageBox.INFO
});
return false;
}
for(var i = 0; i < count; i++)
{
nodes += dataview.getSelectedNodes()[i].id;
if(i < count -1){
nodes += ",";
}
}
Ext.Msg.confirm("提示框","你确认删除所选图片吗",function(button){
if (button == "yes")
{
Ext.MessageBox.show({
msg:"删除中,请等待...",
progress:true,
progressText: '删除中...',
width:300,
wait:true,
waitConfig:{
interval:100,
duration:1000,
fn:function(){
Ext.Ajax.request({
url: "/RTXWH/servlet/DeleteImages",
params: {
"Nodes": nodes
},
callback: function(options, success, response)
{
if(success)
{
Ext.Msg.show({
title:"提示框",
msg:"删除图片成功",
buttons:Ext.MessageBox.OK ,
icon:Ext.MessageBox.INFO,
fn:function(){
store.reload();
}
});
}
else
{
Ext.Msg.show({
title:"提示框",
msg:"删除图片失败, 请重试",
buttons:Ext.MessageBox.OK ,
icon:Ext.MessageBox.WARNING
});
}
}
});
Ext.MessageBox.hide();
}},
closable:true
});
}
});
}
});
Ext.QuickTips.init();
var store = new Ext.data.JsonStore({
url: '/RTXWH/servlet/DataViewImages',
root: 'images',
fields: ['name', 'url', {name:'size', type: 'float'}]
});
store.load();
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{url}" title="{name}"></div>',
'<span class="">{shortName}</span>',
'<span>{sizeString}</span>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>'
);
var customEl;
var ResizableExample = {
init: function(){
var custom = new Ext.Resizable('custom', {
wrap:true,
pinned:true,
minWidth:50,
minHeight: 50,
preserveRatio: true,
handles: 'all',
draggable:true,
dynamic:true
});
customEl = custom.getEl();
document.body.insertBefore(customEl.dom, document.body.firstChild);
customEl.on('dblclick', function(){
customEl.hide(true);
});
customEl.hide();
}
};
Ext.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);
var dataview = new Ext.DataView({
store: store,
id: "dv",
tpl: tpl,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display',
plugins: [
new Ext.DataView.DragSelector()
],
prepareData: function(data){
data.shortName = Ext.util.Format.ellipsis(data.name, 15);
data.sizeString = Ext.util.Format.fileSize(data.size);
return data;
},
listeners: {
selectionchange: {
fn: function(dv,nodes){
var l = nodes.length;
var s = '';
panel.setTitle('图片列表 ('+l+' 项'+s+' 被选中)');
}
},
'dblclick': function(){
var selNode = dataview.getSelectedNodes()[0];
var i = document.getElementById("custom");
i.src = "Upload/" + selNode.id;
customEl.center();
customEl.show(true);
}
}
});
var panel = new Ext.Panel({
id:'images-view',
frame:true,
width:535,
autoHeight:true,
collapsible:true,
layout:'fit',
title:'图片列表(0 项 被选中)',
tbar:[
{text: "添加图片", handler: insertImages}, "-",
{text: "删除图片", handler: deleteImages}
],
butttonAlign: "left",
tools: [{
id:"refresh",
qtip:"刷新图片列表",
on:{click:function(){
panel.body.mask("加载中...", 'x-mask-loading');
setTimeout(function(){
store.reload();
panel.body.unmask();
}, 1000);
}
}
}],
items: dataview
});
panel.render(Ext.getBody());
function insertImages()
{
dialog = new Ext.ux.UploadDialog.Dialog({
url: '/RTXWH/servlet/Upload',
width : 450,
height : 300,
minWidth : 450,
minHeight : 300,
draggable : true,
resizable : true,
modal: true,
reset_on_hide: false,
allow_close_on_upload: false,
upload_autostart: false
});
dialog.show('show-button');
}
function deleteImages()
{
var count = dataview.getSelectionCount();
var nodes = "";
if(count == 0)
{
Ext.Msg.show({
title:"提示框",
msg:"请选择要删除的图片",
buttons:Ext.MessageBox.OK ,
icon:Ext.MessageBox.INFO
});
return false;
}
for(var i = 0; i < count; i++)
{
nodes += dataview.getSelectedNodes()[i].id;
if(i < count -1){
nodes += ",";
}
}
Ext.Msg.confirm("提示框","你确认删除所选图片吗",function(button){
if (button == "yes")
{
Ext.MessageBox.show({
msg:"删除中,请等待...",
progress:true,
progressText: '删除中...',
width:300,
wait:true,
waitConfig:{
interval:100,
duration:1000,
fn:function(){
Ext.Ajax.request({
url: "/RTXWH/servlet/DeleteImages",
params: {
"Nodes": nodes
},
callback: function(options, success, response)
{
if(success)
{
Ext.Msg.show({
title:"提示框",
msg:"删除图片成功",
buttons:Ext.MessageBox.OK ,
icon:Ext.MessageBox.INFO,
fn:function(){
store.reload();
}
});
}
else
{
Ext.Msg.show({
title:"提示框",
msg:"删除图片失败, 请重试",
buttons:Ext.MessageBox.OK ,
icon:Ext.MessageBox.WARNING
});
}
}
});
Ext.MessageBox.hide();
}},
closable:true
});
}
});
}
});
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货