`
king_tt
  • 浏览: 2274452 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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

 
阅读更多

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

1、首先做一个容器

Js代码收藏代码
  1. {
  2. xtype:'box',//或者xtype:'component',
  3. width:100,//图片宽度
  4. height:200,//图片高度
  5. autoEl:{
  6. tag:'img',//指定为img标签
  7. src:'myphoto.gif'//指定url路径
  8. }
  9. }

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

2、图片的动态更新

Java代码收藏代码
  1. //动态更新只需要获取到刚才建立的box的dom的src
  2. myphoto.getEl().dom.src=newSrc

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


分享到:
评论

相关推荐

    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快速入门指南

    面板(Panel)是ExtJS中最常用的容器组件之一,能够包含各种子组件,如按钮、文本框、网格等,并支持多种布局方式。面板可以独立使用,也可以嵌套在其他容器中,非常适合构建结构化的用户界面。 #### 七、ViewPort ...

    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