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

简介: 原文 http://www.cnblogs.com/aehyok/archive/2013/04/27/3048278.html 前言 图片管理要在两个地方使用:一是标签页内的图片管理,一是文章内容编辑时嵌套到插入图片的窗口内。

原文 http://www.cnblogs.com/aehyok/archive/2013/04/27/3048278.html

前言

图片管理要在两个地方使用:一是标签页内的图片管理,一是文章内容编辑时嵌套到插入图片的窗口内。因而,将图片管理做成一个扩展比较方便。当然,做成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。

就这样页面就暂时加载出来了。

目录
相关文章
|
3天前
|
JavaScript 前端开发 Java
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 和 Ext JS 都是 JavaScript 框架,用于开发 Web 应用程序。它们分别提供了不同的功能和特性,以帮助开发者更高效地构建和维护 Web 应用程序。
20 2
|
6月前
|
JavaScript 前端开发 容器
ExtJs 4.x MVC 架构
ExtJs 4.x MVC 架构
|
3天前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
48 0
|
3天前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
23 0
|
9月前
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。
126 0