ExtJs十一(ExtJs Mvc图片管理之一)
前言
图片管理要在两个地方使用:一是标签页内的图片管理,一是文章内容编辑时嵌套到插入图片的窗口内。因而,将图片管理做成一个扩展比较方便。当然,做成MVC模式也行,不争论,不讨论。
要记住,扩展要写在Scripts\ExtJS\Ux目录下,因为在路径的设置中,扩展目录是指向这里的。在该目录下创建一个名为PicManager.js的脚本文件。
片管理的主要界面分两部分,左边以树的形式列出文件目录,要实现目录的添加、删除和编辑功能,右边则以预览形式显示目录中的文件,主要功能是上传文件和删除文件。
上传文件将使用Swfupload,它可一次上传多个文件,到http://code.google.com/p/swfupload/可下载到最新版本的文件,当前示例使用的是2.5.0 beta版本。先下载SWFUpload_v250_beta_3_samples.zip这个文件,解压后,把demos目录下的swfupload目录复制到解决方案的Scripts目录下。然后下载swfupload.swf.v2.5.0.beta3.2.zip文件,把该文件里的文件覆盖swfupload目录下的文件。
正题
现在先来完成左边的目录树。使用树,必然用到TreeStore,因而要从这里入手。而TreeStore可定义模型,也可不定义模型,这个视情况而定。目前的情况是,目录的添加、编辑和删除操作,都需要给出父目录和目录名称,目录名称可使用字段text,父目录则是一个附加字段。目录的操作比较简单,因而直接在模型内完成就行了,因而定义模型是比较好的方法。模型的定义可以独立成一个文件,也可以在initComponet方法内定义。如果在独立的文件定义,就要在扩展中添加requires配置项引用模型。这里将在initComponet方法内定义,代码如下:
Ext.define("Folder", {extend: "Ext.data.Model",fields: ["text", "id", "parentId"],validations: [{type: 'presence',field: 'text'}],proxy: {type: 'ajax',api: {read: 'Folder/List',create: 'Folder/Add',destroy: 'Folder/Delete',update: 'Folder/Edit'},reader: {messageProperty: "Msg",type: 'json',root: "data"},writer: {type: "json",encode: true,root: "data",allowSingle: false},listeners: {exception: ExtMVCOne.ProxyException}}});
定义中,parentId用来记录父目录。添加一个验证项,目录名称不能为空。在代理定义中,reader和writer的定义可标准化数据的输入输出,这个与用户中的定义是一样的。代理的API则定义了操作的提交路径。
接下来定义TreeStore,代码如下:
me.treestore = Ext.create("Ext.data.TreeStore", {root: { id: "/", text: "根目录", expanded: true },model: "Folder"});
TreeStore的定义,除了模型,很重要的一个定义就是根节点了。这里根节点的id使用“/”,是为了方便后台将虚拟路径转换为实际路径。
接着定义树面板,代码如下:
me.tree = Ext.widget("treepanel", {title: "文件目录", region: "west", collapsible: true, rootVisible: true,width: 250, minWidth: 100, maxWidth: 500, split: true, store: me.treestore});
因为使用边框布局,因而要混入边框布局的配置项。这里还设置了显示根目录,这是因为系统将允许在根目录上传文件。
现在来完成右边的文件预览。还是先从模型开始,代码如下:
Ext.define('File', {extend: 'Ext.data.Model',fields: ['filename', 'path',"modify",{ name: "size", type: "int" }]});
这里的字段,除了文件名、路径是必须的,其它的可根据自己的显示内容定义。在这里将显示最后编辑时间、文件大小。
接着是定义Store,代码如下:
me.filestore = Ext.create("Ext.data.Store", {batchActions: false,remoteFilter: false,remoteSort: false,pageSize: 50,model: "File",proxy: {type: "ajax",api: {read: 'File/List',destroy: 'File/Delete'},reader: {type: 'json',root: "data"},writer: {type: "json",encode: true,root: "data",allowSingle: false},listeners: {exception: SimpleCMS.ProxyException}}});
这里的API没有create和update配置项是因为,文件是上传的,不能通过该方式提交,而文件一般也不进行更新,而是先删除后再上传。
接着是用数据视图来显示文件,代码如下:
me.dataview = Ext.widget("dataview", {store: me.filestore, autoScroll: true,multiSelect: true, selectedItemCls: "selected", itemSelector: 'div.imageList',overItemCls: "overitem", trackOver: true,tpl: ['<tpl for=".">','<div class="imageList">','<img width="160" height="160" src="../Thumbnail{path}{filename}?width=160&height=160" data-qtip="文件名:{filename}<br/>修改日期:{modify}<br>大小:{size:this.filesize}" /><br/>','<p class="ellipsis">{filename}</p>','</div>','</tpl>','<div class="x-clear"></div>',{filesize: function (size) {if (size < 1024) {return v + " 字节";} else if (size < 1048576) {return (Math.round(((size * 10) / 1024)) / 10) + " KB";} else {return (Math.round(((size * 10) / 1048576)) / 10) + " MB";}}}]});
定义数据视图的关键就是模板的定义,这个在书中有详细说明和示例,这里就不详细说了。在这里在模板添加了一个filesize方法,用来转换文件大小的显示格式。
因为视图不是面板,没有工具栏组件,因而要在其外面套一个面板用来放置工具栏,所以在视图的定义中没有边框布局的配置项。
下面来完成整个界面框架,代码如下:
me.items = [me.tree,{ title: "图片文件", region: "center", layout: 'fit', items: [me.dataview] }];
现在可以调试一下界面,看看怎么样了。先切换到主面板(mainpanel.js)的视图定义,为图片管理加回布局,布局类型为Fit。然后切换到主面板的控制器,在图片管理的activate方法内,删除alert语句,添加以下代码:
var view = Ext.create('Ext.ux.PicManager', {});var view = Ext.widget("picmanager");panel.add(view);
这里一定要注意,create方法的第一参数必须为字符串,这样,Ext才会去自动加载类文件。也不能使用widget方法去创建,因为类还没注册,Ext不知道别名为picmanager指向的是那个类,也就不会去自动加载了。如果不使用这样的方式,可在控制器中加入requires配置项,指定要加载该类,不过这与初衷相违了。
为了调试方便,可在主面板视图定义中加入配置项activeTab,用来指定初始激活显示那个标签页,这样就不用每次调试都要单击一次标签了。图片管理是第二个标签页,因而设置当前索引为1。
就这样页面就暂时加载出来了。
ExtJs十一(ExtJs Mvc图片管理之一)相关推荐
- ExtJs十三(ExtJs Mvc图片管理之三)
现在要完成目录的编辑操作.因为目录的编辑只是改变目录名称,因而使用Cellediting插件就可完成工作.要完成这个不难,首先在目录树的定义中加入以下语句隐藏列标题: hideHeaders: tru ...
- 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 ...
- 拖拽批量上传图片如何保证 顺序_使用 Eagle 探索图片管理新边界
现状在现实生活中,我们付出劳动或金钱来获取物品,随着时间喜欢的东西会越来越多,渐渐的会囤积物品,即使有些物品买回来可能用的次数屈指可数,也没有打算丢弃掉,总是想着将来会有派上用场的一天.抱着这样的心态 ...
- 图片管理之获取图片列表数据
图片管理 在图片表中我们需要对图片数据进行增删改查操作,这时候我们可以借助于视图集中的ModelViewset来完成相应的操作 获取图片列表数据 接口分析 请求方式: GET /meiduo_admi ...
- linux 相册管理,图片管理(时间线、相册管理)- 深度看图 -Deepin深度系统用户手册...
图片管理 在图片管理界面,您可以通过时间线和相册来管理您的图片. 时间线管理 时间线中的图片按照日期划分,将同一天的图片显示在一起,不同日期的图片分栏排列,最新的日期在最上方. 预览图缩放 通过拖动界 ...
- python之WEB开发:图片管理
1:背景图片管理 <body background="E:/PyCharm 2020.1.1/project/MySite/static/image/short_detect/inde ...
最新文章
- kafka Windows客户端Linux服务器---转
- 字符串和字符数组的关系
- 重磅!微软发布 vscode.dev,把 VSCode 带入浏览器!
- js基础练习---图片无缝左右滚动效果(主要以复制删除为主)
- hadoop日常运维
- 内容拾遗之字符串与数据结构
- 美国顶尖大学的博士是怎样练成的?
- linux系统建立文件系统,linux文件系统的建立
- opencv+python视频实时质心显示
- html高度的属性的值,html – 行高属性是否可以继承父Div的高度属性或其所属Div的访问高度属性?...
- java poi教程_Java完成POI的功能
- 数据结构C语言双向循环链表,数据结构和算法(双向链表和双向循环链表)
- 在RStudio里面部署Python
- java里的哈希值。
- littleVGL开发(12):样式(style)
- linux中文显示为乱码
- 关于iPad程序如何强制横屏
- 2018 Mossad Challenge
- 动态规划----最长公共子序列问题
- java 无序_java – 为什么ArrayList给出无序输出?
热门文章
- 2014计算机二级c语言试题及答案,2014计算机二级C语言测试题及答案解析六之二...
- 组装生成HashMap结构类型
- 《天天数学》连载33:二月二日
- 【BZOJ2301】problem b,数论之莫比乌斯反演
- java 形参 实参_java 形参是父类实参是子类的问题
- flutter 泛型_flutter用NestedScrollView的项目必须知道的坑
- 8.0.22Mysql的详细安装
- 华为数据之道_数字化与数据治理的典范实践者 | 华为数据之道
- visual studio code安装_Deepin系统中如何安装Visual Studio Code
- Java:数组排序输出