ExtJs十三(ExtJs Mvc图片管理之三)

现在要完成目录的编辑操作。因为目录的编辑只是改变目录名称，因而使用Cellediting插件就可完成工作。要完成这个不难，首先在目录树的定义中加入以下语句隐藏列标题：

hideHeaders: true,

接着添加plugins配置项来配置CellEditing插件。因为根目录是不运行编辑的，因而需要监听beforeedit事件，如果当前选择节点是根目录就返回false，不允许编辑，代码如下：

plugins: [{ ptype: "cellediting",listeners: {beforeedit: function (edit, e) {if (e.record.isRoot()) return false;}}
}],

继续定义columns配置项，为目录添加编辑控件，代码如下：

            columns: [{ xtype: "treecolumn", dataIndex: "text", flex: 1,field: { allowBlank: false, selectOnFocus: true }}],

最后定义viewConfig配置项，取消树节点默认的双击操作，代码如下：

viewConfig: {toggleOnDblClick: false
},

好了，现在要考虑的是修改后的提交问题了。Cellediting插件在编辑完成后，会触发edit事件，因而在这时候提交数据是最合适的，代码如下：

                    edit:function(edit,e){e.record.save({success:function(rec,opt){opt.records[0].setId(opt.records[0].data.parentId+opt.records[0].data.text+"/");opt.records[0].commit();},failure:function(e,op){op.records[0].reject();                    Ext.Msg.alert("发生错误",op.error);}});}

在edit事件中，它的第2个参数会返回修改后的记录，因而直接调用模型的save方法就可提交数据了。如果提交成功后需要根据返回数据修改记录的id，并调用commit方法确认修改。如果修改失败，就要调用reject方法取消修改。

现在切换回Folder控制器，完成编辑操作的服务器端代码，基本过程与Add方法类似，因而可以直接复制粘贴一下，修改方法名和具体处理过程就行了，代码如下：

public JObject Edit(){bool success = false;string msg = "";JArray ja = null;try{string data = Request["data"] ?? "";if (string.IsNullOrEmpty(data)){msg = "错误的提交数据。";}else{ja = JArray.Parse(data);if (ja.Count > 0){JObject jo = (JObject)ja[0];string parentDir = (string)jo["parentId"];string foldername = (string)jo["text"];string dirPath = Server.MapPath(root + parentDir);string oldPath = Server.MapPath(root + (string)jo["id"]);if (Directory.Exists(oldPath)){if (Directory.Exists(dirPath + foldername)){msg = "目录已经存在";}else{Directory.Move(oldPath, dirPath + foldername);jo["id"] = parentDir + foldername + "/";success = true;}}else{msg = "要修改的目录不存在";}}else{msg = "错误的提交数据。";}}}catch (Exception e){msg = e.Message;}return Helper.MyFunction.WriteJObjectResult(success, 0, msg, ja);}

至此，目录的全部操作就完成了。至此，目录的全部操作就完成了。

现在要完成的是单击树节点，在图片列表中显示该目录下的图片文件。要做的就是监听树的selectionchange事件，具体代码如下：

                selectionchange: function (model, sels) {var me = this;if (sels.length > 0) {var rs = sels[0],store = me.filestore;store.proxy.extraParams.path = rs.data.id;store.loadPage(1);}me.tree.down("button[tooltip=删除目录]").setDisabled(sels.length == 0);}

现在来完成返回文件数据的控制，创建一个名称为FileController的控制器。加入必要的引用后，和Folder控制器一样，加入一个root的字符串变量来指定根目录。因为File控制器的List方法与Folder的差不多，因而可以直接复制过来修改。修改后的代码如下：

        string root = "../upload";public JObject List(){bool success = false;string msg = "";JArray ja = new JArray();int total = 0;try{int start = 0;int.TryParse(Request["start"], out start);string path = Request["path"] ?? "/";DirectoryInfo dir = new DirectoryInfo(Server.MapPath(root + path));total = dir.GetFiles().Count();foreach (var c in dir.GetFiles().OrderByDescending(m => m.LastWriteTime).Skip(start).Take(50)){ja.Add(new JObject { new JProperty("path",path),new JProperty("filename",c.Name),new JProperty("modify",c.LastWriteTime.ToString("yyyy-MM-dd hh:mm")),new JProperty("size",c.Length)});}success = true;}catch (Exception e){msg = e.Message;}return Helper.MyFunction.WriteJObjectResult(success, total, msg, ja);}

从代码中可以看到，使用LINQ真的太方便了，分页就是小菜一碟。目前暂时只设置了使用最后修改时间排序，等下再研究怎么修改排序。

现在还不能进行测试，因为要解决图片的缩略图显示问题。本示例，不用为每一个上传的图片生成缩略图，只要直接上传就好了，因为NuGet上有一个名称为ImageResizer.MVC的包，非常好用，它会自动根据请求生成缩略图。在主菜单选择工具>库程序包管理>管理解决方案的NuGet程序包打开管理NuGet程序包窗口，然后搜索ImageResizer，找到ImageResizer.MVC后，选择安装。

安装后，还要在Web.convfig文件进行配置。打开WebConfig文件，首先在configuration段内添加以下代码为ImageResize添加一个配置段：

  <configSections><section name="resizer" type="ImageResizer.ResizerSection" requirePermission="false" /></configSections>

然后添加以下配置：

  <resizer><plugins><!-- So all the sample projects can share the same image folder--><add name="VirtualFolder" virtualPath="~/Thumbnail/" physicalPath=".\Upload" /><!-- So Mvc doesn't prevent the image resizer from working --><add name="MvcRoutingShim" /><add name="DiskCache" /></plugins></resizer>

配置中，VirtualFolder的作用是将虚拟目录和物理目录关联起来，其中的virtualPath就是要定义的虚拟目录，在这里是“~/Thumbnail/”，而对应的物理目录physicalPath就是“.\Upload”。

配置DiskCache的作用是开启磁盘缓存，它会把生成的缩略图缓存在磁盘上，这样就不用访问相同的缩略图时，每次都要去生成了。

接着在system.web段内添加以下配置：

  <httpModules><add name="ImageResizingModule" type="ImageResizer.InterceptModule" /></httpModules>

那么它是如何工作的呢？切换回PicManager.js文件，找到DataView定义的模板，会看到图片的显示是这样的：

<img width="160" height="160" src="../Thumbnail{path}{filename}?width=160&height=160" data-qtip="文件名：{filename}<br/>修改日期：{modify}<br>大小：{size:this.filesize}" /><br/>

在src定义的路径中，会看到文件名后多了参数width和height的定义，而ImageSize在路由中检查到访问的虚拟路径时，就会根据width和height的定义来将图片转换为缩略图所需的宽度和高度，然后返回给客户端，非常的方便。

下面可以运行查看

Oh，NO！DataView居然显示出错了。用Firebug检查每个视图条目，居然宽度是占满一行的，仔细看了一下样式定义，居然发现条目上定义的样式没有，很显示是忘记在app.css内定义条目的样式了。于是把以下样式定义追加到app.css文件内：

.imageList{float:left;display:block;width:180px;height:200px;padding:10px;}
.selected{background-color:#D3E1F1;}
.overitem{background-color:#E7E7E7;}
.imageListp{text-align:center;overflow:hidden;line-height:22px;
}.ellipsis{-o-text-overflow:ellipsis;text-overflow:ellipsis;-moz-binding:url('ellipsis.xml#ellipsis');white-space:nowrap;overflow:hidden;}
.x-view-selector{position: absolute;border: 1px dotted #3399BB;
}

下面再刷新一下看看

ExtJs十三(ExtJs Mvc图片管理之三)相关推荐

ExtJs十一(ExtJs Mvc图片管理之一)
前言图片管理要在两个地方使用:一是标签页内的图片管理,一是文章内容编辑时嵌套到插入图片的窗口内.因而,将图片管理做成一个扩展比较方便.当然,做成MVC模式也行,不争论,不讨论. 要记住,扩展要写在S ...
ExtJs十(ExtJs Mvc用户管理之二)
ExtJs十(ExtJs Mvc用户管理之二) 原文 http://www.cnblogs.com/aehyok/archive/2013/04/26/3044152.html 前言为了防止意外情况 ...
ExtJS学习：MVC模式案例（三）
在ExtJS案例系列教程的前两讲,我们了解了该案例的最终实现效果,并且在ExtJS学习:MVC模式案例(二)中我们添加Viewport.js和demoController.js两个文件,实现了对整个网 ...
CMS之图片管理（1）
图片管理要在两个地方使用:一是标签页内的图片管理,一是文章内容编辑时嵌套到插入图片的窗口内.因而,将图片管理做成一个扩展比较方便.当然,做成MVC模式也行,不争论,不讨论. 要记住,扩展要写在Scri ...
CMS之图片管理（3）
现在要完成目录的编辑操作.因为目录的编辑只是改变目录名称,因而使用Cellediting插件就可完成工作. 根据书11.3.2节的示例,要完成这个不难,首先在目录树的定义中加入以下语句隐藏列标题: h ...
IT职场人生系列之十三：技术？管理？业务？
本文是IT职场人生系列的第十三篇. 很多技术人员工作几年后,都要面临未来的出路问题. 所有出路中,无外乎技术.管理.业务三个层面. 技术技术本身也是一条出路,但是在之十二中曾经提到,有深技术和浅技术 ...
拖拽批量上传图片如何保证顺序_使用 Eagle 探索图片管理新边界
现状在现实生活中,我们付出劳动或金钱来获取物品,随着时间喜欢的东西会越来越多,渐渐的会囤积物品,即使有些物品买回来可能用的次数屈指可数,也没有打算丢弃掉,总是想着将来会有派上用场的一天.抱着这样的心态 ...
图片管理之获取图片列表数据
图片管理在图片表中我们需要对图片数据进行增删改查操作,这时候我们可以借助于视图集中的ModelViewset来完成相应的操作获取图片列表数据接口分析请求方式: GET /meiduo_admi ...
linux 相册管理,图片管理（时间线、相册管理）- 深度看图 -Deepin深度系统用户手册...
图片管理在图片管理界面,您可以通过时间线和相册来管理您的图片. 时间线管理时间线中的图片按照日期划分,将同一天的图片显示在一起,不同日期的图片分栏排列,最新的日期在最上方. 预览图缩放通过拖动界 ...

ExtJs十三(ExtJs Mvc图片管理之三)

ExtJs十三(ExtJs Mvc图片管理之三)相关推荐

最新文章

热门文章