在 ExtJS 中自动调整文本字段标签 [英] Autosizing textfield label in ExtJS

问题描述

在 ExtJS 中，是否可以将文本字段的标签设置为最佳大小以适合一行中的文本?

In ExtJS, is it possible to have the label of a textfield optimally sized to fit its text in one line?

labelWidth 属性没有 auto 设置，完全不设置它与指定默认值 100 的效果相同，这会导致冗长的文本分成多行:

The labelWidth property doesn't have an auto setting, and leaving it out completely has same effect as specifying the default value 100, which will cause a lengthy text to break over multiple lines:

http://jsfiddle.net/Qbw7r/

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

I would like to have the label just as wide as it takes to contain the whole text without wrapping, and the editable field fill up the rest of the available width.

推荐答案

您也可以使用 Ext.util.TextMetrics 来测量标签的长度并设置 labelWidth> 相应地.(参见这个小提琴).

You could also use Ext.util.TextMetrics to measure the length of your label and set the labelWidth accordingly. (See 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()
});

如果您需要更通用的解决方案，请查看 ExtJS 文档中 slemmon 提供的评论中的示例.本质上，他的示例创建了文本字段的扩展，它根据标签动态设置标签宽度.这是他的例子:

If you need a more general solution, take a look at the example in the comment provided by slemmon in the ExtJS docs. Essentially, his example creates an extension of the text field which dynamically sets the label width based on the label. Here is his example:

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

这篇关于在 ExtJS 中自动调整文本字段标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！