Ext.tree.ColumnTree——helloWord

最新推荐文章于 2023-05-12 17:23:55 发布

原创最新推荐文章于 2023-05-12 17:23:55 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #header #border #layout #image #button

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个用于选择图片素材的自定义组件实现细节。该组件包括图片预览、上传及删除等功能，并支持按上传日期降序排列图片。此外，还提供了获取已选择图片的相关属性的方法。

ImageChooseDialog = function(A) { A = A || {}; this.initialConfig = A; Ext.apply(this, A) }; ImageChooseDialog.GET_STUFF_IMAGE_URL = "style_getStyleStuff.action"; ImageChooseDialog.COLUMN_HEADER_UPLOADDATE = "上传日期"; ImageChooseDialog.COLUMN_HEADER_UPLOADER = "上传用户"; ImageChooseDialog.COLUMN_HEADER_ORINAME = "文件名称"; ImageChooseDialog.TITLE_STUFF_IMAGE = "图片"; ImageChooseDialog.FILETYPE="*.png;"; ImageChooseDialog.FILEDESC="png图片格式"; ImageChooseDialog.SELECTROOTNODE=""; //当前选定的图片节点 ImageChooseDialog.COMTREE="tree"; ImageChooseDialog.prototype = { init : function() { this.stuffImageTree = new Ext.tree.ColumnTree( { region :"center", enableDrag :true, containerScroll :true, autoScroll :true, rootVisible :false, selModel :new DMB.Components.CheckboxSingleSelectionModel(), //单选模式 columns : [ { header :"文件名称", width :188, dataIndex :"oriname" }, { header :"上传用户", width :88, dataIndex :"uploader" }, { header :"上传日期", width :96, dataIndex :"uploadTime", renderer :this.dateRenderer } ], tbar : [{ xtype : "tbfill" }, { xtype : "button", text : "上传素材", iconCls : "up", tooltip : "上传样式图片素材", handler : this.uploadStyleStuff }, { xtype : "tbseparator" }, { xtype : "button", text : "删除素材", iconCls : "delete", tooltip : "删除素材", handler : this.deleteStyleStuff }], listeners : { click :this.previewImageStuff, //单击预览图片媒体 scope :this }, loader :new Ext.tree.TreeLoader( { dataUrl :ImageChooseDialog.GET_STUFF_IMAGE_URL, baseAttrs : {uiProvider :"col"}, uiProviders : { col :DMB.Components.CheckboxColumnNodeUI } }), root :new Ext.tree.AsyncTreeNode( { text :"oriname", name : "图片" }) }); //排序 new Ext.tree.TreeSorter(this.stuffImageTree, { folderSort: true, property:'uploadTime', dir:'desc' }); if(ImageChooseDialog.COMTREE=="tree"){ ImageChooseDialog.COMTREE=this.stuffImageTree; } ////////////////////////////////////////////////// var A = new Ext.Panel( { title :"图片", region :"center", cls :"panel", layout :"border", items : [ this.stuffImageTree ] }); this.previewPanel = new Ext.Panel( { closable : false, border : false, html : '<div id="divPreviewStuff"></div>' }); var B = new Ext.Panel( { title :"图片预览", region :"east", //东部 split :false, width :200, collapsible :true, items : [{ region : "north", layout : "fit", height : 250, split : true, margins : "5 0 0 0", items : [this.previewPanel] }] }); var D = new Ext.Panel( { layout :"border", items : [ A, B ] //中间东部 }); return D }, //alert消息 showOptionMegBox : function (B, C, A) { Ext.MessageBox.show({ title : B, msg : C, width : 400, closable : false, buttons : Ext.MessageBox.OK, icon : A }); }, //删除素材 deleteStyleStuff : function(){ var A=ImageChooseDialog.SELECTROOTNODE; //获取当前选择的图片记录 if (A.leaf) { DWREngine.setAsync(false); StyleDAOAjax.deleteStuffByID(A.attributes.stuffid,function(data){ if(data){ showOptionMegBox("操作成功","删除图片素材成功",Ext.MessageBox.OK); ImageChooseDialog.COMTREE.root.reload(); ImageChooseDialog.SELECTROOTNODE=""; var B = document.getElementById("divPreviewStuff"); B.innerHTML = '' }else{ showOptionMegBox("操作失败","该图片可能被其他样式所引用，删除失败",Ext.MessageBox.ERROR); } }) DWREngine.setAsync(true); }else{ showOptionMegBox("操作提示","请选择一个图片进行删除",Ext.MessageBox.INFO); } }, //上传素材 uploadStyleStuff : function(){ showUploader(ImageChooseDialog.FILETYPE, ImageChooseDialog.FILEDESC,{styleStuff : "styleStuff"}, function(){ ImageChooseDialog.COMTREE.root.reload(); ImageChooseDialog.SELECTROOTNODE=""; var B = document.getElementById("divPreviewStuff"); B.innerHTML = '' }) }, //点击并且预览事件 previewImageStuff : function(A, B) { if (A.leaf) { ImageChooseDialog.SELECTROOTNODE=A; var B = document.getElementById("divPreviewStuff"); B.innerHTML = '<img src="' + basePath+" mce_src="' + basePath+"upload/"+A.attributes.previewFile + '" width="100%" height="100%" title="'+ A.attributes.oriname +'" />' } }, //获取选择的图片 getSelectedImage : function() { var A = this.stuffImageTree.getSelectionModel().getSelectedNodes(); if (A && A.length == 1) { var B = { stuffid :A[0].attributes.stuffid, //ID url : basePath+"upload/"+A[0].attributes.previewFile, //url width :A[0].attributes.width, //width height :A[0].attributes.height //height }; return B } else { return null } } };