Extjs box动态显示图片问题 - ITeye问答

问答首页 → Web前端技术

0 0

Extjs box动态显示图片问题20

图片已经在服务器../../photo目录下
可以点编辑时候打开在页面for里面有个box里面可以预览出来

点编辑时候json传递过来数据如下：

ajax json load string = {success:true,totalProperty:1,root:[{engineer_id:'aaa',engineer_name:'aaaa',phoneno:'11111',mobileno:'1111',engineer_photo:'bbb.jpg',createdate:'2012-05-28'}]}

里面engineer_photo 即为显示的图片名称

现在如何在下面的BOX里面显示出来

		        {
  			        	inputType:"file",
	      			id: 'engineer_photo',
	    			emptyText: '请选择',
	      			fieldLabel: '选择头像',
	      			name: 'engineer_photo'
		
  				} , {
  					xtype : 'box',
 					id : 'imageBrowse',
 					fieldLabel : "预览",
 					width : 100,
 					autoEl : {
 						width : 100,
 						height : 100,
     					tag : 'img',
     					src : '../../photo/ '+.../*此处如何得到路径*/,  
   					style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',
    					complete : 'off',
                        id : 'imageBrowse'
 								}
 					}

src里面改为绝对路径是可以显示的

JavaScript EXT json

2012年5月28日 22:08

bennyshum
6
0 0 2

1个答案按时间排序按投票排序

0 0

采纳的答案

你说的其实是动态生成的问题。。。想想图片是变化的，肯定不是唯一的，所以你想通过后台给你传过来图片的地址，然后你就显示就ok了

这个问题我们项目是这样解决的（也是我操刀的）：
1.create一个box的容器（form或者container或者其他）
2.讲需要的组件create出来（比如：textfield，label或者box）
3.当store或者ajax请求加载数据的时候，将组件添加到容器中，并且给组件附上相应的值

比如：

Ext.Ajax.request({
    url: 'page.php',
    params: {
        id: 1
    },
    success: function(response){
        var store = Ext.getStore("yourStore");
        store.load();
        //组装组件的操作，给组件动态添加属性的值，比如image
        
    }
});

2012年5月29日 05:38

chenhailong
180
0 0 18

4条评论

相关推荐

轻松搞定Extjs 带目录: 格式化功能则能够使数据显示更加友好和标准化。 Extjs的组件系统非常丰富，包括按钮、日期选择器、ComboBox等，它们都可以通过配置实现复杂的交互逻辑。数据管理部分涉及到了Extjs对Ajax请求的封装、数据代理、读取...

Extjs表格合并代码: 在本文中，我们将深入探讨如何在ExtJS框架中实现表格单元格的合并，以及解决不同浏览器间盒模型差异带来的布局问题。ExtJS是一款强大的JavaScript库，用于构建富客户端应用程序，其表格组件是功能丰富的数据展示工具...

ExtJs官方网站中文的入门指南 javascript: 本文档旨在引导初学者快速入门ExtJs，通过实例演示如何搭建开发环境并实现简单的动态页面。 ##### **1.1 下载ExtJs** - **官方下载地址**: [http://extjs.com/downloads](http://extjs.com/downloads) - **建议**:...

EXTJS实用开发指南: 这个例子展示了如何动态创建一个窗口组件，并在其内部显示自定义内容。 3. EXTJS组件体系： EXTJS的组件库主要分为底层API、控件（widgets）和实用工具（Utils）三大部分。 - 底层API（core）：提供DOM操作、...

Extjs xtype集合: ### Extjs xtype集合详解 #### 一、基本概念与背景在Extjs开发过程中，`xtype`（扩展类型）是极为重要的一个概念。它实际上是一种类型标识符，用于快速创建特定类型的组件实例。通过使用预定义的`xtype`值，...

extjs4代码: - 兼容性：尽管ExtJS 4支持多种浏览器，但新版本的特性可能在旧版浏览器上存在问题，开发时需考虑兼容性。 - 学习曲线：ExtJS 4相对其他前端框架有较陡峭的学习曲线，需要投入一定时间去熟悉其组件和API。在...

ExtJS-Layouts.pdf: 《深入解析ExtJS4布局系统：从概念到实践》一、引言在Web开发领域，用户界面的布局设计是构建美观且功能强大的应用程序的关键环节。ExtJS，作为一款领先的JavaScript框架，提供了丰富的组件库和高度定制化的布局...

Extjs3.0 checkboxGroup 动态添加item实现思路: 在探讨Extjs3.0中CheckboxGroup动态添加item的问题之前，首先要了解Extjs3.0的CheckboxGroup组件。CheckboxGroup允许用户在一个组合框内选择多个选项，与单选按钮组RadioGroup相反，它是多个复选框的集合。然而，与...

extjs中grid中嵌入动态combobox的应用: 在EXTJS应用中，将动态Combobox嵌入Grid可以提供丰富的交互体验，用户可以在Grid的单元格中直接选择下拉列表中的值，同时，通过自定义的renderer函数确保数据显示的正确性。这种做法在数据管理界面中非常常见，特别...

ExtJS中设置下拉列表框不可编辑的方法: 在前端开发中，ExtJS是一个广泛使用的JavaScript框架，它用于构建交互式...本篇内容详细介绍了如何通过设置`editable`和`typeAhead`属性来控制ExtJS中的下拉列表框是否可编辑，希望对遇到类似问题的开发者们有所帮助。

学习ExtJS Panel常用方法: 这在动态调整 Panel 大小或添加/删除子组件后尤为有用。 - 示例代码： ```javascript var panel = new Ext.Panel(); panel.add(new Ext.Button({ text: '按钮' })); panel.layout.layout(); // 强制重新布局 ...

EXT_JS实用教程: - **基本组件**：包括`Box`（具有边框属性的组件）、`Button`（按钮）、`ColorPalette`（调色板）、`DataView`（数据显示视图）、`DatePicker`（日期选择面板）等。 - **工具栏组件**：如`Toolbar`（工具栏）、`...

Ext Js权威指南(.zip.001: 9.4.4　盒子布局、垂直布局与水平布局：ext.layout.container.box、ext.layout.container.vbox与ext.layout.container.hbox / 442 9.4.5　为盒子模型提供调整大小的功能：ext.resizer.splitter / 445 9.4.6　手风琴...

ExtAspNet v2.2.1 （2009-4-1）值得一看: -加载s.gif图片在本机进行，不会请求extjs.com远程资源(feedback:efrigate43,abaocoole)。 -在AJAX回发后确保Asp.net的按钮控件仍然具有AJAX的特性。 -更新/basic/login.aspx示例，使用验证图片(feedback:kedee)...

ExtAspNet_v2.3.2_dll: ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库，拥有原生的AJAX支持和丰富的UI效果，目标是创建没有ViewState，没有JavaScript，没有CSS，没有...

利用jQuery扩展VS2008 Ajax应用: 为了解决这些问题，本文提出了一种新的解决方案——利用jQuery来扩展Visual Studio 2008的Ajax应用。这种方法既保持了原有VS2008的开发架构不变，又能够充分发挥jQuery轻量级库的优势，提供更为灵活的Ajax应用方式。...

Ask-but

我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

查看全部排名>>

Global site tag (gtag.js) - Google Analytics