`
nbkangta
  • 浏览: 431555 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

在ExtJs的容器中显示图片,并动态更新

    博客分类:
  • JS
阅读更多

    Extjs并没有提供直接的组件来显示图片。网上通过设置textfield的InputType为Image然后再修改dom对象来实现,其实image的属性值并没有包含在Extjs的官方文档当中。可以通过以下的思路实现,更可以进一步扩展成自定义组件。推荐的方法如下:

1、首先做一个容器

{
    xtype: 'box', //或者xtype: 'component',
    width: 100, //图片宽度
    height: 200, //图片高度
    autoEl: {
        tag: 'img',    //指定为img标签
        src: 'myphoto.gif'    //指定url路径
    }
}

 这样就在panel或者其他的容器里面显示图片了

2、图片的动态更新

 

//动态更新只需要获取到刚才建立的box的dom的src
myphoto.getEl().dom.src = newSrc

 这样就实现了显示与动态更新

分享到:
评论
15 楼 liyan06 2012-03-08  
楼主,我是个初学者,如果那个图片是用servlet生成,然后到指定的url,那最后一句  
myphoto.getEl().dom.src = newSrc ,这一句代码是在哪里写的啊?
14 楼 nbkangta 2011-06-06  
SongQi 写道
SongQi 写道


xtype : 'box',  
id : 'logoPicid',
fieldLabel: '图片预览',
width : 150,  
height : 100,  
autoEl : {
    tag : 'img',
src : '/attachment/image/20110527163130.gif',    
style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);' 
}


Ext.getCmp('logoPicid').getEl().dom.src = "/attachment/image/20110524164859.gif";
这样不行Ext.getCmp('logoPicid').getEl().dom.src 为空或不为对象 求解决下

    版本 3.3.1

09年的东西,我现在也很久没弄extjs了,呵呵,建议通过firebug调试一下,也许在新的版本中已经去掉了类似属性或者方法,不好意思
13 楼 SongQi 2011-05-27  
SongQi 写道


xtype : 'box',  
id : 'logoPicid',
fieldLabel: '图片预览',
width : 150,  
height : 100,  
autoEl : {
    tag : 'img',
src : '/attachment/image/20110527163130.gif',    
style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);' 
}


Ext.getCmp('logoPicid').getEl().dom.src = "/attachment/image/20110524164859.gif";
这样不行Ext.getCmp('logoPicid').getEl().dom.src 为空或不为对象 求解决下

    版本 3.3.1
12 楼 SongQi 2011-05-27  


xtype : 'box',  
id : 'logoPicid',
fieldLabel: '图片预览',
width : 150,  
height : 100,  
autoEl : {
    tag : 'img',
src : '/attachment/image/20110527163130.gif',    
style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);' 
}


Ext.getCmp('logoPicid').getEl().dom.src = "/attachment/image/20110524164859.gif";
这样不行Ext.getCmp('logoPicid').getEl().dom.src 为空或不为对象 求解决下
11 楼 whflovecn 2011-01-03  
如果图片是二进制流存在oracle的blob字段中该怎么解决?
10 楼 nbkangta 2010-05-19  
sssgon 写道
您好,我想问下LZ代码里面的
myphoto是什么?
我的box组件放在formpanel中,然后我使用FormPanel的名字不行

你要更新的是box组件里面的图片
当然myphoto指的是存放box的变量名称
9 楼 sssgon 2010-05-19  
您好,我想问下LZ代码里面的
myphoto是什么?
我的box组件放在formpanel中,然后我使用FormPanel的名字不行
8 楼 生于菇乡 2010-04-22  
这是3.0的,我用的是2.0 。
autoEl属性不能用,
郁闷
7 楼 blueyanghualong 2009-10-27  
哥们你在不 问你个问题哦?
我现在用你的东西?
只是我图片上传到D:\java\apache-tomcat-6.0.18\webapps\pushvod\upload\11.jpg

# { 
#     xtype: 'box', //或者xtype: 'component', 
#     width: 100, //图片宽度 
#     height: 200, //图片高度 
#     autoEl: { 
#         tag: 'img',    //指定为img标签 
#         src: 'D:\java\apache-tomcat-6.0.18\webapps\pushvod\upload\11.jpg
后'    //指定url路径 
#     } 
# }
图片不显示 这是为什么呢?
谢谢
6 楼 nbkangta 2009-08-14  
king520 写道
请问这个放图片显示是放在
pannel里面还是直接用一个textField就可以了呢?

我用的是把图片放在一个box组件里面
当然你也可以再panel当中这么用,panel继承自box
希望能对你有帮助,呵呵
5 楼 nbkangta 2009-08-14  
zhujs 写道
src: 'myphoto.gif'    //指定url路径

src 路径中又中文不能正常显示,怎么回事


有中文不能显示是Application Server的问题
如果是tomcat,推荐你修改两处代码的设置
首先修改server.xml,在connector 8080加上属性URIEncoding="UTF-8",这样AS就能对中文指向的URL资源进行寻址
然后页面和JS采用UTF-8编码
不知道能不能解决你的问题,呵呵
4 楼 king520 2009-08-11  
请问这个放图片显示是放在
pannel里面还是直接用一个textField就可以了呢?
3 楼 zhujs 2009-07-31  
src: 'myphoto.gif'    //指定url路径

src 路径中又中文不能正常显示,怎么回事
2 楼 nbkangta 2009-06-20  
阳光雨露 写道

哥们儿,你能不能写的详细一点呀

这个应该已经写的蛮详细的了吧?你有问题的话我们私下交流吧
1 楼 阳光雨露 2009-06-12  
哥们儿,你能不能写的详细一点呀

相关推荐

    ExtJs框架系列之图片批量显示,上传,删除

    在本文中,我们将深入探讨如何使用ExtJs框架实现图片的批量显示、上传和删除功能。ExtJs是一款强大的JavaScript库,专用于构建富客户端应用程序,它提供了丰富的组件和强大的数据管理能力,非常适合处理图像操作。 ...

    Extjs4 图片浏览器

    在实现这个图片浏览器的过程中,开发者可能使用了以下核心ExtJS4组件和技术: 1. **Panel(面板)**:作为应用的基本容器,图片浏览器通常由多个Panel组成,每个Panel可以承载不同的功能,如导航栏、图片展示区、...

    ExtJs图片按钮控件

    ExtJs图片按钮控件是ExtJs框架中一种增强的按钮组件,它允许开发者在按钮上显示图片,以提供更丰富的用户界面。这个控件通常用于创建具有视觉吸引力的交互式UI元素,比如导航按钮或者操作按钮。下面我们将深入探讨...

    ExtJS4中文教程2 开发笔记 chm

    ExtJS 4中动态加载的路径设置 Extjs4 API文档阅读(一)——类系统(Class System) Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读(二)——MVC构架(上) Extjs4 API文档阅读(二)——MVC构架(下) Extjs4...

    ExtJs 的中文API文档版本3.3

    在ExtJs中,布局管理器(Layout Manager)负责处理组件容器内的空间分配和排列方式,例如:Fit布局、Table布局、Anchor布局、Form布局等。这使得开发者可以轻松地创建适应不同屏幕尺寸和数据量的界面。 3. **表格...

    extjs 嵌入 ckeditor 例子

    当我们需要在ExtJS应用中嵌入CKEditor时,这通常是为了提供用户友好的文本编辑功能。下面我们将详细讨论如何实现这个集成过程。 **1. 首先,引入CKEditor和ExtJS** 确保你的项目中已经包含了CKEditor和ExtJS的库...

    jQuery EasyUI仿Extjs界面

    2. **手风琴布局(Accordion)**:手风琴布局允许在一个容器中显示多个面板,每次只有一个面板展开,其余面板折叠。在左侧菜单实现手风琴效果,可以优化空间利用,方便用户导航。 3. **Tab标签页(Tabs)**:在描述...

    ExtJS登入验证码的实现

    在IT行业中,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端Web应用程序。它提供了一套完整的组件模型,包括数据绑定,使得开发复杂的用户界面变得容易。在这个特定的场景中,我们要探讨的是如何在ExtJS中...

    TinyMce For Extjs

    3. `test.windowgroup.html`:可能展示了如何在ExtJS的窗口(Window)组件中嵌入TinyMCE编辑器,窗口组(WindowGroup)则可能涉及到多个窗口的管理和显示。 4. `test.collapse.html`:这个文件可能包含关于如何在...

    ExtJS GTGrid 简单用户管理

    随后,作者表示自己正在学习ExtJS,并利用所学知识完成了CRUD(创建、读取、更新、删除)操作的演示程序,其中包括ExtJS版本和GTGrid版本。由于这是一个学习过程中的演示,作者认为其作品可能比较粗糙,但希望能够对...

    ExtJs_Viewport_Example

    在创建一个ExtJS应用时,通常会设置Viewport作为应用的顶级容器,这样可以确保应用在整个浏览器窗口中显示得恰到好处,无论窗口大小如何变化。 在给定的文件列表中,我们可以看到以下几个关键文件: 1. **index....

    ExtJS TabPanel 标签操作

    在ExtJS中,TabPanel是一个容器,可以包含多个Panel(或称之为卡片),每个Panel对应一个标签页。创建一个基本的TabPanel需要指定` xtype: 'tabpanel' `,并可以通过`items`属性来添加初始的面板。例如: ```...

    extjsExtjs学习笔记——多个图片XTemplate排版居中,自动缩放处理

    XTemplate是ExtJS中的一个重要组件,用于在数据驱动的视图中动态渲染HTML内容。 首先,我们要理解XTemplate的基本使用。XTemplate是基于模板字符串生成HTML的工具,它可以接收数据对象并根据模板规则生成对应的HTML...

    TextArea_HTMLEditor 编辑器 learning extjs 中文

    1. 图片上传:在使用TextArea_HTMLEditor时,可能需要集成图片上传功能,通常通过自定义按钮实现,处理上传逻辑并在成功后更新编辑器内容。 2. 安全性:由于编辑器允许输入HTML代码,可能存在XSS攻击风险,因此在...

    Extjs 通用后台模板| 经典 Tree+Tab+Grid

    2. **选项卡(Tab)**: TabPanel是ExtJS中的另一个核心组件,它允许在一个容器中组织多个面板,每个面板对应一个选项卡。这样可以有效利用屏幕空间,提供多工作区。在后台系统中,不同的选项卡可以承载不同的功能...

    extjs入门.pdf

    - **代码结构**:首先需要引入 ExtJS 库文件,然后定义一个容器(Container),并在其中添加文本标签(Label)或其他组件,以展示“Hello World”文字。 - **布局管理**:理解如何利用 ExtJS 内置的布局管理器(如...

    Extjs4学习指南

    - **项目创建**:在MyEclipse中新建一个Web项目,命名为“Extjs4”。 - **资源导入**:将Extjs 4.0.7压缩包解压后,将所有文件复制到项目WebRoot目录下。 - **部署与测试**:部署并启动Tomcat服务器,访问`...

    Extjs4-学习指南

    - 在 MyEclipse 中创建一个新的 Web 项目,命名为 `Extjs4`。 - 将 Extjs 4.0.7 的所有文件解压并复制到项目的 Webroot 目录下。 - Examples 目录包含了官方提供的示例程序,其中可能包含 PHP 代码,忽略任何错误...

Global site tag (gtag.js) - Google Analytics