Extjs box动态显示图片问题

图片已经在服务器../../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里面改为绝对路径是可以显示的

bennyshum
三楼 已经解决: Ext.getCmp("editForm").form.load({ url : '../../extjs.do?action=processLoadAction', waitMsg : '正在载入数据...', success : function(form, action) { //alertInfo('载入数据成功!', Ext.Msg.OK); var photo_file = action.result.data.engineer_photo; // if(photo_file==""){ // Ext.getCmp('engineer_photo_box').getEl().dom.src = photo_path+"images.jpg"; // }else{ Ext.getCmp('engineer_photo_box').getEl().dom.src = photo_path+photo_file; // } }, failure : function.....
8 年多之前 回复

1个回答

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

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

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

}

});
[/code]

bennyshum
三楼 多谢了 我试下
8 年多之前 回复
chenhailong118
chenhailong118 在succes的地方放下如下代码 var mainMenu = Ext.getCmp("*****"); var store = Ext.getStore("*******"); store.on('load', function(){ for(var i = 0;i<store.data.length;i++){ var thisMenuData = store.getAt(i).data; var button = Ext.create('Ext.Button', { text: thisMenuData.name, height:thisMenuData.height, width:thisMenuData.width, icon:thisMenuData.icon id:thisMenuData.id, handler:me.showMenu }); mainMenu.add(button); var splitCmp = Ext.create("widget.tbseparator"); mainMenu.add(splitCmp); } }); 这里是例子,不是真正的实装
8 年多之前 回复
bennyshum
三楼 。。。里面没有下面的这两句 刚为了标记放那忘拿了 var store = Ext.getStore("imageStore"); store.load();
8 年多之前 回复
bennyshum
三楼 不好意思 才接触WEB开发没几天 再问下 你说的请求加载数据时候将组件添加到容器中,给组件附值 我能理解 但是EXT不熟 下面是载入时候的方法: function loadFormData(grid) { var _record = grid.getSelectionModel().getSelected(); if (!_record) { alertInfo('请选择要修改的一项!', Ext.Msg.OK); } else { showEditWin(); Ext.getCmp("editForm").form.load({ url : '../../extjs.do?action=processLoadAction', waitMsg : '正在载入数据...', success : function(form, action) { alertInfo('载入数据成功!', Ext.Msg.OK); var store = Ext.getStore("imageStore"); store.load(); }, failure : function(form, action) { alertError('载入数据失败!', Ext.Msg.OK); }, params : {beanName:'XXXDao',engineer_id:_record.get('engineer_id'),$fnname:fnname} }); } }; 然后我要怎样具体操作可以帮我再说些么
8 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐