как исправить этот макет extjs? - PullRequest
Новая
       3

как исправить этот макет extjs?

2 голосов
/ 07 августа 2011

Это мой дополнительный код 

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          
        }]
});

проблема в первый раз при загрузке показывает вот так

enter image description here

как только изображение загружено, а затем обновлено, оно дает мне макет, который мне нужен

enter image description here

Полагаю, проблема возникает из-за размера изображения. как решить эту проблему?

извините за плохой английский

С уважением

Ответы [ 2 ]

3 голосов
/ 08 августа 2011

Найден правильный способ сделать это, добавив прослушиватель и привязать событие загрузки к элементу 

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' });
2 голосов
/ 07 августа 2011

Из комментариев выше.

Если высота изображения не меняется, вы можете установить высоту изображения: height:90 внутри объявления изображения: jsfiddle.net / 6NK7n /

В любом случае размер изображения будет изменен в соответствии с установленной вами высотой.

...