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

发布于 2024-10-30 13:57:36 字数 831 浏览 1 评论 0原文

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

我设法通过设置一个包含 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'
                }
            ]
        }
    ]
});

原文

I'm creating a formpanel with items created via xtype (not calling new for each items).
I'd like to add a precision at the right of the TextField.

I managed to do it by setting a CompositeField containing the TextField + a standard Panel, but is there a better way, like a property in the TextField I would have missed or a better alternative ?

Thanks for your help ! :)

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'
                }
            ]
        }
    ]
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冷月断魂刀 2024-11-06 13:57:36

如果您仅需要一个字段，则 CompositeField 就可以了。但是，您真的需要一个全新的 Panel 来显示文本吗？常规的 Label 还不够吗？

如果您需要更具可重用性的解决方案，请查看 FormLayout。您可以修改模板并在字段后面添加一个特殊部分，在其中显示附加信息。

回复收藏 0 原文

带上头具痛哭 2024-11-06 13:57:36

我不知道有哪个属性可以通过右侧的面板来完成您想要的操作。不过，如果您多次执行此操作，请考虑为其创建自己的类型：

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 。

I'm not aware of a property that'll do what you want with a panel on the right. If it's something you're doing more than once, though, consider making your own type for it:

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);

That will let you use durationfield as though it were a first class citizen.

回复收藏 0 原文