ExtJS composite field does not display in FF

2
votes

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 ?

3
javascriptextjs
I just discover that div element around whole composite element has height set to 1px in style attribute, I do not set it up intentionally - so how I can make sure that it will be not there ? - bensiu
Why are you working with such outdated browsers? IE6 and FF2 have hardly any market share, and both Microsoft and Mozilla have stopped support for them. Just walk forward. If you insist on finding an answer to this, please start by including the output from your Firebug debugger. - jmort253
When I write "FF 2 fields" 2 is refering to number of fields not version of FF what is 3.6. Problem is downgraded to attribute "height=1" issue and FF is more strict about displaing this around composite field what visually looks like not display - bensiu
A comma after the "FF" and before the "2" might help avoid a lot of confusion. :) I read the question as "FF2" as well. - Mansoor Siddiqui
version of FF is not the issue ( setting height of component to 1 is ) - you are welcome to answer question, because your comment is not productive at all - bensiu

3 Answers

3
votes

Rob suggest to add defaults in compositefield like this:

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

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

3
votes

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

0
votes

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: SS

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.