首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

切换到PicManager.js文件,找到me.items的定义,在图片文件的配置项添加tbar配置项,用来放置一个分页工具条,并在工具条上放一个SplitButton用来实现排序功能。...在定义排序按钮的时候使用iconCls配置项为图片添加了一个图片,因而要在app.css添加它的样式,代码如下: .sort { background:url(".....先在解决方案ExtJS\ux目录下创建一个DataView目录,然后在Ext JS包examples\ux\DataView目录下,将DragSelector.js文件复制到该目录。为什么要这样?...requires配置项,来声明该类需要使用到DragSelector类,代码如下: requires: ["Ext.ux.DataView.DragSelector"], 接着在me.dataview的定义添加以下代码来创建插件...在dataview的定义添加以下代码监听视图的selectionchange事件: listeners: { scope: me,

3.3K30

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

要记住,扩展要写在Scripts\ExtJS\Ux目录下,因为在路径的设置,扩展目录是指向这里的。在该目录下创建一个名为PicManager.js的脚本文件。...片管理的主要界面分两部分,左边以树的形式列出文件目录,要实现目录的添加、删除和编辑功能,右边则以预览形式显示目录的文件,主要功能是上传文件和删除文件。...如果在独立的文件定义,就要在扩展添加requires配置项引用模型。...添加一个验证项,目录名称不能为空。在代理定义,reader和writer的定义可标准化数据的输入输出,这个与用户的定义是一样的。代理的API则定义了操作的提交路径。...在这里在模板添加了一个filesize方法,用来转换文件大小的显示格式。 因为视图不是面板,没有工具栏组件,因而要在其外面套一个面板用来放置工具栏,所以在视图的定义没有边框布局的配置项。

3.7K30
您找到你想要的搜索结果了吗?
是的
没有找到

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

要记住,扩展要写在Scripts\ExtJS\Ux目录下,因为在路径的设置,扩展目录是指向这里的。在该目录下创建一个名为PicManager.js的脚本文件。...片管理的主要界面分两部分,左边以树的形式列出文件目录,要实现目录的添加、删除和编辑功能,右边则以预览形式显示目录的文件,主要功能是上传文件和删除文件。...如果在独立的文件定义,就要在扩展添加requires配置项引用模型。...添加一个验证项,目录名称不能为空。在代理定义,reader和writer的定义可标准化数据的输入输出,这个与用户的定义是一样的。代理的API则定义了操作的提交路径。...在这里在模板添加了一个filesize方法,用来转换文件大小的显示格式。 因为视图不是面板,没有工具栏组件,因而要在其外面套一个面板用来放置工具栏,所以在视图的定义没有边框布局的配置项。

3.4K30

ExtJs十四(ExtJs Mvc图片管理之五swfupload)

经过前几节系列文章,现在只剩下利用swfupload来上传图片的功能了,在ExtJs十一(ExtJs Mvc图片管理之一)中有它的下载地址和加入项目的说明。...实现方法是在显示图片的视图底部添加一个工具栏,然后将工具栏分成两部分,第一部分显示一个SPAN元素,第二部分显示一个进度条来指示上传进度。...接着在图片文件的面板内添加一个dockedItems配置项,在面板底部放置一个工具栏,并在工具栏上放置一个SPAN元素和进度条,代码如下: dockedItems: [...q  custom_settings:自定义配置,这里一定要添加scope配置项,且值为me,这样就可在swfupload的事件内找到扩展自身,从而使用扩展的属性和方法。...队列的文件都上传后会执行queueComplete方法,这个和uploadComplete方法检查队列没有文件后的处理有点重叠,看你怎么取舍了。

4.2K20

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

开始前,现在解决方案创建一个Upload目录用来存放上传的图片,为了便于测试,在Upload目录下随便添加两个目录,这里添加1和2。...这里要注意,当放到服务器上的时候,可能目录结构会根据需要进行调整,因而好的方式是在项目的Web.Config文件添加一个定义变量,然后从文件中提取目录,从而避免因目录改动造成的代码修改。...在创建树的配置项定义添加以下代码: tbar: [ { iconCls: "folder-add", handler: me.onAddFolder...要正确显示按钮,还需要在app.css添加按钮的样式代码,代码如下: 当然,别忘记将需要的图片复制到相应的目录。 现在刷新一下页面,会看到树顶部多了3个按钮。...会发现在save方法内的配置对象添加了一个parentNode关键字,它会指向父节点,这样的好处是,在服务器端成功添加目录后,就可直接调用parentNode通过其appendChild方法添加1个子节点

1.1K10

ExtJs三(实现验证码图片控制器)

前言 在Extjs二(实现登录)http://www.cnblogs.com/aehyok/archive/2013/04/18/3028739.html,今天紧跟上一次内容继续,本次主要就是实现验证码图标控制器...实现验证码图片控制器  1.现在项目中添加一个Helper目录,该目录将用来放置一些辅助性的类,包括一些自定义的实用方法。...接着在控制器目录(Controllers)添加一个名为VerifyCodeController的控制器,因为输出的是文件格式的图片,不是视图,因而需要将返回类型ActionResult修改为FileContentResult...在VerifyCode类,CreateVerifyCode方法可生成一个4位的验证码,而调用CreateImages方法则可返回图片的字节数组,通过这两个就可以生成图片文件了,代码如下: public...控制器的编码已经完成了,现在来测试一下是否能正常显示图片。在浏览器打开网站,然后修改地址访问VerifyCode控制器 ? 可见验证码图片控制器实现了哦

71530

ExtJs三(实现验证码图片控制器)

前言 在Extjs二(实现登录)http://www.cnblogs.com/aehyok/archive/2013/04/18/3028739.html,今天紧跟上一次内容继续,本次主要就是实现验证码图标控制器...实现验证码图片控制器  1.现在项目中添加一个Helper目录,该目录将用来放置一些辅助性的类,包括一些自定义的实用方法。...接着在控制器目录(Controllers)添加一个名为VerifyCodeController的控制器,因为输出的是文件格式的图片,不是视图,因而需要将返回类型ActionResult修改为FileContentResult...在VerifyCode类,CreateVerifyCode方法可生成一个4位的验证码,而调用CreateImages方法则可返回图片的字节数组,通过这两个就可以生成图片文件了,代码如下: public...控制器的编码已经完成了,现在来测试一下是否能正常显示图片。在浏览器打开网站,然后修改地址访问VerifyCode控制器 ? 可见验证码图片控制器实现了哦

55810
领券