在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?

属性没有一个自动设置，完全不同于指定默认值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/

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屋！