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

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

在定义排序按钮的时候使用iconCls配置项为图片添加了一个图片,因而要在app.css中添加它的样式,代码如下: .sort { background:url(".....先在解决方案ExtJS\ux目录下创建一个DataView目录,然后在Ext JS包中examples\ux\DataView目录下,将DragSelector.js文件复制到该目录。为什么要这样?...刷新一下浏览器,然后在视图中任意点按下鼠标左键,然后拖动鼠标,通过拖动方式选择图片了。 现在来完成图片的删除功能。...因而需要在视图选择了图片的时候开启它。同文件夹删除按钮一样,这里也不能使用id,只能使用查询方式获取按钮。...().getSelection(); if (rs.length > 0) { content = ["确定删除以下图片?"]

3.3K30

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

前言 图片管理要在两个地方使用:一是标签页内的图片管理,一是文章内容编辑时嵌套到插入图片的窗口内。因而,将图片管理做成一个扩展比较方便。当然,做成MVC模式也行,不争论,不讨论。...要记住,扩展要写在Scripts\ExtJS\Ux目录下,因为在路径的设置中,扩展目录是指向这里的。在该目录下创建一个名为PicManager.js的脚本文件。...这里还设置了显示根目录,这是因为系统将允许在根目录上传文件。 现在来完成右边的文件预览。...在这里将显示最后编辑时间、文件大小。...为了调试方便,可在主面板视图定义中加入配置项activeTab,用来指定初始激活显示那个标签页,这样就不用每次调试都要单击一次标签了。图片管理是第二个标签页,因而设置当前索引为1。

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

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

现在要完成的是单击树节点,在图片列表中显示该目录下的图片文件。...现在还不能进行测试,因为要解决图片的缩略图显示问题。...本示例,不用为每一个上传的图片生成缩略图,只要直接上传就好了,因为NuGet上有一个名称为ImageResizer.MVC的包,非常好用,它会自动根据请求生成缩略图。...切换回PicManager.js文件,找到DataView定义的模板,会看到图片显示是这样的: <img width="160" height="160" src=".....DataView居然<em>显示</em>出错了。用Firebug检查每个视图条目,居然宽度是占满一行的,仔细看了一下样式定义,居然发现条目上定义的样式没有,很<em>显示</em>是忘记在app.css内定义条目的样式了。

3.9K30

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

前言 图片管理要在两个地方使用:一是标签页内的图片管理,一是文章内容编辑时嵌套到插入图片的窗口内。因而,将图片管理做成一个扩展比较方便。当然,做成MVC模式也行,不争论,不讨论。...要记住,扩展要写在Scripts\ExtJS\Ux目录下,因为在路径的设置中,扩展目录是指向这里的。在该目录下创建一个名为PicManager.js的脚本文件。...这里还设置了显示根目录,这是因为系统将允许在根目录上传文件。 现在来完成右边的文件预览。...在这里将显示最后编辑时间、文件大小。...为了调试方便,可在主面板视图定义中加入配置项activeTab,用来指定初始激活显示那个标签页,这样就不用每次调试都要单击一次标签了。图片管理是第二个标签页,因而设置当前索引为1。

3.4K30

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

经过前几节系列文章,现在只剩下利用swfupload来上传图片的功能了,在ExtJs十一(ExtJs Mvc图片管理之一)中有它的下载地址和加入项目的说明。...实现方法是在显示图片的视图底部添加一个工具栏,然后将工具栏分成两部分,第一部分显示一个SPAN元素,第二部分显示一个进度条来指示上传进度。...q  button_text:按钮显示的文本,这里要显示的是“上传图片”。 q  button_text_style:按钮文本的样式,这里不需要。...方法uploadError是用来显示上传错误的,复制过来根据自己想法修改提示方式就行了。...方法uploadSuccess会在一个文件上传成功后执行,这里要做的就是将进度条显示到100%,并显示服务器端返回的信息。

4.2K20

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

接着图片管理一http://www.cnblogs.com/aehyok/archive/2013/04/27/3048278.html。 先来完成树目录的显示。...开始前,现在解决方案中创建一个Upload目录用来存放上传的图片,为了便于测试,在Upload目录下随便添加两个目录,这里添加1和2。...要正确显示按钮,还需要在app.css中添加按钮的样式代码,代码如下: 当然,别忘记将需要的图片复制到相应的目录。 现在刷新一下页面,会看到树顶部多了3个按钮。...("button[tooltip=删除目录]").setDisabled(sels.length == 0); } } 现在刷新页面,会看到树显示后会选择...第2种方法是显示一个提示框,让用户输入目录名,然后再创建目录。简单点,这里将使用第1种方法,在PicManager.js的底部,添加一个onAddFolder方法。

1.1K10

ExtJs学习笔记(21)-使用XTemplate结合WCF显示数据

个人认为,XTemplate是ExtJs中最灵活的用来显示数据的组件,有点类似aspx中的Repeater控件,显示数据的模板完全可以由用户以html方式来定制....title: 'Lead Developer', company: 'Ext JS, LLC', email: 'jack@extjs.com...div id="demo" style="border:1px solid #ccc;padding:10px;width:300px"> 解释一下:利用ExtJs...MyServices.svc/GetPerson方法,获取Json字符串,其它地方完全一样,需要注意的是: a.返回的字符串,需要用Ext.Util.JSON.decode转换成JSON对象 b.为了显示出...demo.com.className先把目标div设置成"加载中"的字样 运行效果如下: 转载请注明来自"菩提树下的杨过" 这回运行时,增加了"数据加载中"的效果,加载成功后与刚才的静态示例显示结果完全相同

74580

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控制器 ? 可见验证码图片控制器实现了哦

72730

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控制器 ? 可见验证码图片控制器实现了哦

56510

显示进度下载图片

通过下载一张图片作为案例,当然换成其它软件的链接也可以,把保存的文件后缀名改成相应的内容就可以。 ? ? 获取图片大小 首先到网上找一个图片网站,通过鼠标右键复制链接。...编写代码,获取图片文件大小,r是返回的Response对象,有一个headers属性,是一个字典的数据类型,通过它的Content-Length可以获取文件的大小,单位是byte字节。 ?...下载图片 利用with open方法将图片的内容r.content写入img.jpg中,模式要用wb,表示二进制格式写入。 ?...程序运行完成后,会在当前程序文件所在位置生成一张图片,这就是爬取一张图片的原理了,更多网络爬虫的知识将在爬虫与数据处理专题讲解。 ?...丰富进度条 上面的进度条已经实现最核心的功能了,下载速度,大小,所剩时间可以自己去计算,放到显示里面就可以了。 ? ? 加上剩余时间。 ?

3.7K20
领券