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里面改为绝对路径是可以显示的

2012年5月28日 22:08

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

相关推荐

    轻松搞定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 Panel常用方法

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

    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应用方式。...

Global site tag (gtag.js) - Google Analytics