ExtJS 复合字段在 FF 中不显示答案

【问题标题】：ExtJS composite field does not display in FFExtJS 复合字段在 FF 中不显示
【发布时间】：2011-01-17 18:06:21
【问题描述】：

我创建了一个字段集，它是表单的一部分，并且只显示了porpuse：

H_Info = Ext.extend (Ext.form.FieldSet, { 标题：'起源信息'，标签宽度：1，初始化组件：函数（）{ 这个.items = [ { xtype: '显示域', 名称：'名称' }, { xtype: '显示域', 名称：'地址' }, { xtype: '复合域', 项目： [ { xtype: '显示域', 名称：'组织日期'，宽度：100 }, { xtype: '显示域', 名称：'组织价值'，宽度：120，弹性：1 }] }, { xtype: '显示域', 名称：'当前值' } ]; H_Info.superclass.initComponent.call ( this ); } // 初始化组件 });

它在 IE 6.0 中按预期工作，字段显示在预期的位置，但是当我在 FF 中尝试时，在复合字段中分组的 2 字段（OrgDate 和 OrgValue）不显示。

知道我错过了什么吗？

【问题讨论】：

我只是发现整个复合元素周围的 div 元素在样式属性中的高度设置为 1px，我不是故意设置它 - 那么我如何确保它不存在呢？跨度>
您为什么要使用这些过时的浏览器？ IE6 和 FF2 几乎没有任何市场份额，微软和 Mozilla 都停止了对它们的支持。只是向前走。如果您坚持要找到这个问题的答案，请首先包含您的 Firebug 调试器的输出。
当我写“FF 2 字段”时，2 指的是字段数而不是 FF 的版本，即 3.6。问题被降级为属性“height=1”问题，FF 更严格地在复合字段周围显示这个视觉上看起来不显示的内容
在“FF”之后和“2”之前的逗号可能有助于避免很多混淆。 :) 我也把这个问题读作“FF2”。
FF 的版本不是问题（将组件的高度设置为 1 是）-欢迎您回答问题，因为您的评论根本没有成效

标签： javascript extjs

【解决方案1】：

Rob 建议像这样在复合字段中添加默认值：

…… xtype: '复合域', 默认值：{ 字段标签：' '，标签分隔符：' '， 身高：12 }, ……

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

【讨论】：

【解决方案2】：

我认为这与渲染 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 

} );

希望这能解决您的问题，干杯，

罗伯

【讨论】：

感谢您的实际培训来解决它，但是这个设置标签的技巧（我也放了真实的文本）并没有设置整个复合组件的容器的高度 - 无论标签设置高度如何复合保持1px，我按照你的逻辑并尝试设置值但仍然没有效果......

【解决方案3】：

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

OrgValue 没有通过 flex 扩展，因为您还定义了大小。如果您从 OrgValue 中删除“width:120:”，则它会扩展为全宽。

【讨论】：

将组件的高度设置为 1 是问题