在 TextField 之后显示文本的最佳方式是什么？答案

【问题标题】：What is the best way to display text just after a TextField?在 TextField 之后显示文本的最佳方式是什么？
【发布时间】：2011-04-07 08:38:28
【问题描述】：

我正在创建一个表单面板，其中包含通过 xtype 创建的项目（不是为每个项目调用 new）。我想在 TextField 的右侧添加一个精度。

我设法通过设置一个包含 TextField + 标准面板的 CompositeField 来做到这一点，但有没有更好的方法，比如我会错过的 TextField 中的属性或更好的替代方法？

感谢您的帮助！ :)

new Ext.form.FormPanel ({
    'id':                   'create-form',
    'header':               true,
    'headerAsText':         true,
    'hideCollapseTool':     true,
    'title':                'New Component',
    'width':                550,
    'style':                'margin: 100px auto',
    'labelWidth':           200,
    'items': [
        {
            'items': [
                {
                    'xtype':            'textfield',
                    'fieldLabel':       'Duration (in hours)',
                    'name':             'name'
                }
            ]
        }
    ]
});

【问题讨论】：

标签： extjs textfield

【解决方案1】：

如果您只需要一个字段，CompositeField 就可以了。但是，您真的需要一个全新的Panel 来处理文本吗？普通的Label 不够吗？

如果您需要更可重用的解决方案，请查看FormLayout 的fieldTpl 配置选项。您可以修改模板并在字段后添加一个特殊部分，用于显示附加信息。

【讨论】：

感谢使用标签的想法。我会试试那个。

【解决方案2】：

我不知道有一个属性可以通过右侧的面板执行您想要的操作。但是，如果您不止一次这样做，请考虑为它制作自己的类型：

Ext.ns('Ext.ux.form');

Ext.ux.form.DurationField = Ext.extend(Ext.form.CompositeField, {
  constructor: function(cfg) {
    cfg = Ext.applyIf(cfg || {}, {
      items: [ /** blah blah */ ]
    });
    Ext.ux.form.DurationField.superclass.constructor.call(this, cfg);
  }
});

Ext.reg('durationfield', Ext.ux.form.DurationField);

这将使您可以像使用一等公民一样使用durationfield。

【讨论】：

你的回答很好，而且会很完美，但我还有很多其他细节要设置在右边（小时只是一个例子，对不起，我没有更准确：/）。我给了你一个+1的好主意:)。谢谢！

【解决方案3】：

您还可以在复合字段中使用Ext.form.DisplayField (xtype displayfield) 来显示一些静态文本。

【讨论】：