Javascript 如何修复这个extjs布局?
这是我的分机码Javascript 如何修复这个extjs布局?,javascript,html,css,extjs,extjs4,Javascript,Html,Css,Extjs,Extjs4,这是我的分机码 Ext.create('Ext.panel.Panel', { title: 'Customer Information', width: 300, bodyPadding: 5, floating: true, renderTo: document.body, frame: true, collapsible: true, closable: true, defaults: { labelWidth: 90
Ext.create('Ext.panel.Panel', {
title: 'Customer Information',
width: 300,
bodyPadding: 5,
floating: true,
renderTo: document.body,
frame: true,
collapsible: true,
closable: true,
defaults: { labelWidth: 90 },
items: [{
xtype: 'image',
id: 'profile_pic',
name: 'profile_pic',
style: { display: 'block', margin: 'auto' },
src: 'http://www.sencha.com/img/20110215-feat-html5.png',
},{
xtype: 'displayfield',
fieldLabel: 'ID',
name: 'viewer_id',
id: 'viewer_id',
padding: '5 0 0 0',
fieldCls: 'specialfield',
value: ''
},{
xtype: 'displayfield',
fieldLabel: 'Name',
name: 'viewer_name',
id: 'viewer_name',
fieldCls: 'fieldcolor',
value: '',
width: 280
},{
xtype: 'displayfield',
fieldLabel: 'Member ID',
name: 'viewer_mem_id',
id: 'viewer_mem_id',
fieldCls: 'fieldcolor',
width: 280
},{
xtype: 'displayfield',
fieldLabel: 'Address',
name: 'viewer_address',
id: 'viewer_address',
fieldCls: 'fieldcolor',
width: 280
},{
xtype: 'displayfield',
fieldLabel: 'Phone [Home]',
name: 'viewer_phone_home',
id: 'viewer_phone_home',
fieldCls: 'fieldcolor',
width: 280
},{
xtype: 'displayfield',
fieldLabel: 'Phone [Mobile]',
name: 'viewer_phone_mobile',
id: 'viewer_phone_mobile',
fieldCls: 'fieldcolor',
width: 280
},{
xtype: 'displayfield',
fieldLabel: 'Phone [Work]',
name: 'viewer_phone_work',
id: 'viewer_phone_work',
fieldCls: 'fieldcolor',
width: 280
}]
});
问题是它第一次加载时显示为这样
一旦图像加载,然后刷新它给我的布局我需要
我猜问题是由于图像大小造成的。如何解决这个问题
对不起,英语不好
从上面的评论来看
如果图像高度不变,则可以在声明图像的内部设置图像高度:
height:90
:
无论如何,图像将调整大小以适应您设置的高度。通过添加侦听器并将加载事件绑定到元素,找到了正确的方法
var v_profile_image = Ext.widget('image', {
src: '',
style: { display: 'block', margin: 'auto' },
name: 'profile_pic'
});
v_profile_image.on('load', function(e) {
this.up('panel').doLayout();
}, v_profile_image, { element: 'el' });
尝试添加
autoHeight:true
尝试使用autoHeight时没有运气:(如果图像高度没有改变,您可以在声明图像的内部设置图像高度:height:90
:是的,谢谢您的回复。问题是图像高度没有固定:(它可能会在150到200px之间变化哦…但是如果你设置一些中间值,比如175,图像将调整大小以适应高度。