javascript - 在 ExtJS 中自动调整文本字段标签

Question

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

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

http://jsfiddle.net/Qbw7r/

我希望标签的宽度与不换行时包含整个文本所需的宽度一样，并且可编辑字段填满可用宽度的其余部分。

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