javascript - ExtJS composite field does not display in FF - Stack Overflow

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:       'positefield',            
      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 positefield are not displayed.

Any idea what I am missing ?

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:       'positefield',            
      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 positefield are not displayed.

Any idea what I am missing ?

• javascript
• extjs

Share Improve this question Follow edited Jan 17, 2011 at 18:19 bensiu asked Jan 17, 2011 at 18:06 bensiubensiu 25.6k5656 gold badges8080 silver badges117117 bronze badges 5

• I just discover that div element around whole posite 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 Commented Jan 17, 2011 at 21:01
• 1 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. – jamesmortensen Commented Jan 23, 2011 at 6:33
• 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 posite field what visually looks like not display – bensiu Commented Jan 23, 2011 at 16:10
• 1 A ma after the "FF" and before the "2" might help avoid a lot of confusion. :) I read the question as "FF2" as well. – Mansoor Siddiqui Commented Jan 28, 2011 at 19:06
• version of FF is not the issue ( setting height of ponent to 1 is ) - you are wele to answer question, because your ment is not productive at all – bensiu Commented Jan 28, 2011 at 21:54

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3 +50

Rob suggest to add defaults in positefield like this:

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

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

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 ponent to match that (Check the two defaults items added to the main ponent and the posite 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:       'positefield',
      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

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.