Составное поле ExtJS не отображается в FF

Question

Я создал набор полей, который является частью формы и имеет только отображение porpuse:

H_Info = Ext.extend ( Ext.form.FieldSet, {
  title:         'Origination Info',
  labelWidth:    1,

  initComponent : function ( ) {
    this.items = [ {
      xtype:       'displayfield',
      name:        'Name'
    }, {
      xtype:       'displayfield',
      name:        'Address'      
    }, {
      xtype:       'compositefield',            
      items:       [ {
        xtype:        'displayfield',
        name:         'OrgDate',
        width:        100       
      }, {
        xtype:        'displayfield',
        name:         'OrgValue',
        width:        120,
        flex:         1      
      } ]
    }, {
       xtype:    'displayfield',
       name:     'CurrentValue'      
    } ];

    H_Info.superclass.initComponent.call ( this );  

  } // initComponent 

} );

Работает так, как предсказано в IE 6.0. Поля отображаются в ожидаемых местах, однако при попытке в FF 2 поля (OrgDate и OrgValue), сгруппированные в составное поле, не отображаются.

Есть идеи, что мне не хватает?

Answer 1

Роб предлагает добавить значения по умолчанию в составное поле следующим образом:

      ....
      xtype:       'compositefield',
      defaults: {
          fieldLabel: ' ',
          labelSeparator: ' ',
          <B>height: 12</B>
      }, 
      ....

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

Answer 2

Я думаю, что это связано с тем, что при рендеринге ExtJS не видит содержимого с фиксированной высотой в полях (полях ввода), потому что вы не используете метки (которые имеют высоту, основанную на размере шрифта, когда на самом деле что-то есть)там) и только используя displayFields, которые являются просто пустыми текстовыми элементами (форма отображается сначала пустой, я думаю, что вы загружаете ее после этого из магазина или чего-то еще).

Из вашего кода я считаю, что выя не хочу показывать метки (labelwidth 1), но вы все равно можете использовать метки, чтобы обмануть визуализатор, чтобы он думал, что там есть текст (пространство без торможения), тем самым устанавливая высоту окружающего компонента, чтобы соответствовать этому (Проверьтедва основных элемента по умолчанию добавлены к основному компоненту и составному полю:

H_Info = Ext.extend ( Ext.form.FieldSet, {
  title:         'Origination Info',
  labelWidth:    1,
  defaults: {
      fieldLabel: ' ',
      labelSeparator: ' '
  },

  initComponent : function ( ) {
    this.items = [ {
      xtype:       'displayfield',
      name:        'Name'
    }, {
      xtype:       'displayfield',
      name:        'Address'      
    }, {
      xtype:       'compositefield',
      defaults: {
          fieldLabel: ' ',
          labelSeparator: ' '
      },            
      items:       [ {
        xtype:        'displayfield',
        name:         'OrgDate',
        width:        100       
      }, {
        xtype:        'displayfield',
        name:         'OrgValue',
        width:        120,
        flex:         1      
      } ]
    }, {
       xtype:    'displayfield',
       name:     'CurrentValue'      
    } ];

    H_Info.superclass.initComponent.call ( this );  

  } // initComponent 

} );

Надеюсь, это решит вашу проблему, ура,

Роб

Answer 3

Какую версию ext вы используете? Я попробовал ваш код в последней версии 3.3.1, и он, кажется, работает нормально в FF3.6, IE8 и Chrome7. Вот скриншот:

OrgValue не расширяется с помощью flex, поскольку у вас также есть определенный размер. Если вы удалите «width: 120: из OrgValue, то он развернется до полной ширины.