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: '&nbsp;',
      labelSeparator: '&nbsp;'
  },

  initComponent : function ( ) {
    this.items = [ {
      xtype:       'displayfield',
      name:        'Name'
    }, {
      xtype:       'displayfield',
      name:        'Address'      
    }, {
      xtype:       'compositefield',
      defaults: {
          fieldLabel: '&nbsp;',
          labelSeparator: '&nbsp;'
      },            
      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建议在复合字段中添加默认值，如下所示：

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

为它增加高度，这不是完美的解决方案，但它会覆盖高度并强制复合场显示（显示）

Answer 3

您使用的是什么版本的分机？我在最新版本3.3.1中尝试了你的代码，它似乎在FF3.6，IE8和Chrome7中运行良好。这是一个截图：

OrgValue不会通过flex进行扩展，因为您还定义了一个大小。如果你删除“宽度：120：从OrgValue然后它扩展到全宽。

ExtJS复合字段不显示在FF中

3 个答案: