在 ExtJS 中自动调整文本字段标签答案

【问题标题】：Autosizing textfield label in ExtJS在 ExtJS 中自动调整文本字段标签
【发布时间】：2013-09-18 10:57:59
【问题描述】：

在 ExtJS 中，是否可以将文本字段的标签调整到最佳大小以使其文本适合一行？

labelWidth 属性没有 auto 设置，完全省略它与指定默认值 100 具有相同的效果，这将导致冗长的文本跨越多行：

http://jsfiddle.net/Qbw7r/

我希望标签尽可能宽以包含整个文本而不换行，并且可编辑字段填满剩余的可用宽度。

【问题讨论】：

不要认为它是这样工作的。 labelAlign:top 怎么样？这应该会给你足够的空间。

标签： javascript css layout extjs extjs4

【解决方案1】：

您还可以使用Ext.util.TextMetrics 来测量标签的长度并相应地设置labelWidth。（见this fiddle）。

var label = 'Changing text with variable length',
    tm = new Ext.util.TextMetrics(),
    n = tm.getWidth(label + ":"); //make sure we account for the field separator

Ext.create('Ext.form.Panel', {
    bodyPadding: 10,
    bodyStyle: 'background-color: #cef',
    items: [{
        xtype: 'textfield',
        emptyText: 'no data',
        fieldLabel: label,
        labelWidth: n
    }],
    margin: 25,
    renderTo: Ext.getBody()
});

如果您需要更通用的解决方案，请查看the example in the comment provided by slemmon in the ExtJS docs。本质上，他的示例创建了文本字段的扩展，该扩展根据标签动态设置标签宽度。这是他的例子：

Ext.define('MyTextfield', {
    extend: 'Ext.form.field.Text',
    xtype: 'mytextfield',
    initComponent: function () {
        var me = this,
            tm = new Ext.util.TextMetrics();

        me.labelWidth = tm.getWidth(me.fieldLabel) + 10;
        tm.destroy();

        me.callParent(arguments);
    }
});

【讨论】：

文档中的解决方案似乎不起作用：jsfiddle.net/Qbw7r/11 你真的尝试过吗？无论如何，当labelWidth 与TextMetrics 预先计算并直接在配置中设置时，一切都很好。这正是我想要的。
它不起作用，因为您设置了anchor: 100%。如果你删除它，它工作正常。请注意，当您在字段上指定 anchor 配置时，labelWidth 似乎根本不起作用（有或没有扩展名）。
无法使用，因为 Sencha Architect 不能很好地定义 initComponent，所以我监听“添加”事件并在该处理程序中执行 textMetrics = new Ext.util.TextMetrics(); component.labelWidth = textMetrics.getWidth (component.fieldLabel + component.labelSeparator) + component.labelPad; textMetrics.destroy();

【解决方案2】：

这样对我有用：

 labelWidth: 300

http://jsfiddle.net/Qbw7r/7/

或者制作autosize，你可以这样尝试：

//  anchor: '100%',
    labelStyle: 'white-space: nowrap;'

http://jsfiddle.net/Qbw7r/8/

【讨论】：

我喜欢 nowrap 解决方案

【解决方案3】：

我所做的是禁用 textField 的 fieldLabel 并在 textField 前面添加Ext.form.Label。 Ext.form.Label 具有 shrinkWrap 配置。我希望这会有所帮助，如果您想出其他不意味着修改组件的默认功能的解决方法，请告诉我:)。我应该说我正在使用 Sencha Architect，这就是为什么我想尽可能少地添加自定义脚本。

【讨论】：

谢谢。在尝试按照您所说的进行操作后，组件不会出现在同一行：jsfiddle.net/swvqaoj6。我想我一定是错过了什么。

【解决方案4】：

您实际上可以将标签宽度设置为自动。试试这个：

labelWidth: false,
labelStyle: 'width: auto'

【讨论】：

【解决方案5】：

一个简单的解决方案可能对您的整个应用都有帮助，那就是覆盖“onRender”事件。使用 Ext.util.TextMetrics 计算文本宽度：

（这里是radiogroup的一个例子）

Ext.define('NG.override.form.field.Radio', {
    override: 'Ext.form.field.Radio',
    autoBoxLabelWidth: false,

    onRender: function () {
        var me = this,
            boxlabelWidth;

        me.callParent(arguments);
        me.renderActiveError();

        if (me.autoBoxLabelWidth) {
            me.tm = new Ext.util.TextMetrics(me.getEl());
            boxlabelWidth = me.tm.getWidth(me.boxLabel) + Ext.Number.from(me.autoBoxLabelWidth, 0);
            me.setWidth(boxlabelWidth);
        }
    }
});

然后将属性 'autoBoxLabelWidth' 设置为 'true' 或要添加的像素数：

xtype: 'radiogroup',
fieldLabel: 'Two Columns',
columns: 2,
vertical: true,
items: [{
          boxLabel: 'Item 1',
          name: 'rb',
          autoBoxLabelWidth: true,
          inputValue: '1'
        }, {
          boxLabel: 'Item 2',
          name: 'rb',
          autoBoxLabelWidth: 15,
          inputValue: '2',
          checked: true
        }]

【讨论】：

【解决方案6】：

你也可以试试

width: '100%'

【讨论】：