Ext文件管理界面

[{ 
    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"));
            }
        }],
    }]
}]