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）中尝试时，则不会显示在Compositefield中分组的字段。

知道我缺少什么吗？

Answer 1

我认为这与以下事实有关：渲染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 2

Rob建议像这样在Compositefield中添加默认值：

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

向其添加高度，这不是完美的解决方案，但是它将覆盖高度并迫使CompositeField显示（显示）

Answer 3

您正在使用哪个版本的ext？ 我在最新版本3.3.1中尝试了您的代码，它在FF3.6，IE8和Chrome7中似乎运行良好。 这是屏幕截图：

OrgValue不会通过flex进行扩展，因为您还定义了大小。 如果您从OrgValue中删除了“ width：120：”，则它将扩展为完整宽度。