ExtJS复合字段不在FF中显示

Question

I created a fieldset that is part of the form and have just display 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 

} );

It works as predicted in IE 6.0 fields are displayed in expected places, however when I try it in FF 2 fields (OrgDate, and OrgValue) grouped in compositefield are not displayed.

Any idea what I am missing ?

Answer 1

I think this has to with the fact that on render ExtJS does not see any fixed height content in the fields (input fields) because you are not using labels (which have a height based on the font size when there is actually something in there) and only using displayFields, which are just empty text elements (the form is rendered empty first, I think you are loading it after that from a store or something).

From your code I reckon that you don't want to show labels (labelwidth 1), but you can still use the labels to trick the renderer to think there is text in there (non braking space), thereby setting the height of the surrounding component to match that (Check the two defaults items added to the main component and the composite field:

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 

} );

Hope this solves your problem, Cheers,

Rob

Answer 2

Rob suggest to add defaults in compositefield like this:

....
      xtype:       'compositefield',
      defaults: {
          fieldLabel: ' ',
          labelSeparator: ' ',
          
      }, 
      ....

add height to it, it not perfect solution, however it will overwrite height and force compositefield to display (show up)

Answer 3

What version of ext are you using? I tried your code in the latest version, 3.3.1 and it seems to be working fine in FF3.6, IE8, and Chrome7. Here is a Screenshot:

OrgValue is not expanding via flex because you also have a size defined. If you remove the "width:120: from OrgValue then it expands to the full width.