[{
alias: "widget.filepanel",
layout: {
type: "hbox",
align: "stretch"
},
defaults: {
split: true
},
items: [{
flex: 1,
xtype: "treepanel",
plain: true,
//title: "目录列表",
rootVisible: false,
root: {
text: "Root node",
expanded: true
},
split: true,
height: 400,
store: Ext.create("Ext.data.TreeStore", {
fields: ["id", { name: "text", mapping: "name" }, "leaf", "parentId"],
autoLoad: false,
listeners: {
beforeload: function (store, operation, eOpts) {
store.getProxy().extraParams = { id: operation.id };
}
},
proxy: {
type: 'jsonp',
url: fileServerUrlPrefix + '/cxfservice/directoryAction_list.action',
reader: {
type: "json",
root: "directorys"
}
},
nodeParam: "id",
defaultRootId: 0
}),
useArrows: true,
listeners: {
itemClick: function (view, record, item, index, e, eOpts) {
var directoryId = record.get("id");
debugger;
//得到左侧的tree
var grid = this.ownerCt ? this.ownerCt.getComponent(1) : null;
if (grid) {
//根据目录id查询文件列表的信息
grid.getStore().getProxy().extraParams = { directoryId: directoryId };
grid.getStore().reload();
}
},
itemcontextmenu: function (menutree, record, items, index, e) {
e.preventDefault();
e.stopEvent();
var treeMenu = Ext.create('Ext.menu.Menu', {
width: 100,
plain: true,
items: [{
text: '重命名',
tooltip: "重新命名文件夹",
iconCls: "btn_folder_edit",
handler: function () {
Ext.Msg.prompt('重命名', '请输入新的文件夹名称:', function (btn, text) {
if (btn == 'ok') {
if (record.get("text") !== text) {
this.getSelectionModel().getLastSelected().set("text", text);
Ext.data.JsonP.request({
url: fileServerUrlPrefix + "/cxfservice/directoryAction_update.action",
params: {
id: record.get("id"),
name: text,
parentId: record.get("parentId")
},
callback: function (res) {
console.log(res);
}
});
}
}
}, menutree, false, record.get("text"));
}
}]
});
//定位菜单的显示位置
treeMenu.showAt(e.getPoint());
},
},
}, {
xtype: "grid",
store: Ext.create("Ext.data.Store", {
fields: ["id", "title", "uploadDate", "uploadUser", "fileSize", "extension","directoryId"],
autoLoad: true,
proxy: {
type: "jsonp",
url: fileServerUrlPrefix + "/cxfservice/fileAction_list.action",
reader: {
type: "json",
root: "files"
}
},
sorters: [{
property: 'uploadDate',
direction: 'DESC'
}],
}),
newFolderText: "新建文件夹",
listeners: {
itemclick: function (view, record, item, index, e, eOpts) {
debugger;
var me = this;
//得到左侧的tree
var tree = me.ownerCt ? me.ownerCt.getComponent(0) : null;
if (tree) {
//tree.expandAll();
//Ext.defer(function () {
// var node = tree.getStore().getNodeById(record.get("directoryId"));
// tree.getSelectionModel().select(node);
//},500);
}
}
},
tbar: [{
text: "新建文件夹",
iconCls: "btn_folder_add",
handler: function (btn) {
//得到文件列表的grid对象
var grid = btn.up('grid');
//得到左侧的tree
var tree = grid.ownerCt ? grid.ownerCt.getComponent(0) : null;
if (tree) {
//得到最后选中的节点
var selNode = tree.getSelectionModel().getLastSelected();
//如果有选中的节点就在选中的节点下增加子节点
if (selNode) {
selNode.insertChild(0, {
text: grid.newFolderText
});
} else {//没有则在根目录下增下子节点
tree.getRootNode().insertChild(0, {
text: grid.newFolderText
});
}
debugger;
//添加文件夹
Ext.data.JsonP.request({
url: fileServerUrlPrefix + "/cxfservice/directoryAction_add.action",
params: {
name: grid.newFolderText,
parentId: selNode?selNode.get("id") : 0
},
callback: function (res) {
console.log(res);
}
});
}
}
}, "->", {
text: "上传文件",
iconCls: "btn_up",
handler: function (btn) {
//显示上传文件窗口
/*Ext.create("Ext.window.Window",{
title:"文件上传",
width:400,
height:200,
layout:"fit",
items:[{
xtype:"form",
html:"<iframe src='http://localhost:8080/cxfservice'></iframe>",
border:false,
items:[{
xtype:"filefield",
msgTarget: 'side',
allowBlank: false,
margin:20,
anchor: '100%',
name:"upload",
buttonText: '选择文件...'
}],
buttons:[{
text:"上传",
iconCls:"btn_up",
handler:function(btn){
debugger;
//上传文件
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
url: 'http://localhost:8080/cxfservice/fileAction_upload',
waitMsg: '正在上传文件...',
success: function(fp, o) {
Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
},
error:function(res){
console.info(res);
}
});
}
//刷新文件列表
}
}]
}],
}).show();*/
//选择文件
//上传
//显示
//得到文件列表的grid对象
var grid = btn.up('grid');
//得到左侧的tree
var tree = grid.ownerCt ? grid.ownerCt.getComponent(0) : null;
if (tree) {
//得到最后选中的节点
var selNode = tree.getSelectionModel().getLastSelected();
if (selNode == null) {
Ext.Msg.alert("提示", "请选择要上传到的文件夹");
return;
}
var directoryId = selNode.get("id");
window.location.href = fileServerUrlPrefix + "/cxfservice/fileAction_uploadUI.action?directoryId=" + directoryId + "&userName=" + R2Cfg.userInfor.name;
}
}
}],
flex: 4,
plain: true,
// title: "文件列表",
height: 400,
emptyText: "空文件夹",
features: [{ ftype: 'grouping' }],
columns: [{
xtype: "rownumberer"
}, {
text: "ID",
flex: 0.5,
hidden: true,
dataIndex: "id"
}, {
text: "文件名称",
flex: 3,
dataIndex: "title",
renderer: function (value, m, record) {
var extension = record.get("extension");
if (extension === "jpg" || extension === "png" ||
extension == "gif") {
m.tdCls = "file-image";
} else if (extension === "doc" || extension === "docx") {
m.tdCls = "file-doc";
} else if (extension === "pdf") {
m.tdCls = "file-pdf";
} else if (extension === "xls" || extension === "xlsx") {
m.tdCls = "file-xls";
} else if (extension === "txt") {
m.tdCls = "file-txt";
} else if (extension === "html") {
m.tdCls = "file-html";
} else if (extension === "java" || extension === "jar") {
m.tdCls = "file-java";
} else if (extension === "zip" || extension === "rar") {
m.tdCls = "file-zip";
} else {
m.tdCls = "file-unkown";
}
return " "+value;
}
}, {
text: "文件大小",
flex: 1,
dataIndex: "fileSize"
}, {
text: "上传日期",
flex: 1,
dataIndex: "uploadDate"
}, {
text: "上传者",
flex: 1,
dataIndex: "uploadUser"
}, {
xtype: "actioncolumn",
width: 50,
iconCls: "btn_down",
tooltip: "下载",
text: "操作",
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
window.open(fileServerUrlPrefix + "/cxfservice/downloadAction.action?id=" + rec.get("id"));
}
}],
}]
}]
Ext文件管理界面
最新推荐文章于 2021-04-29 01:18:07 发布