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

Question

在ExtJS中,是否可以将文本字段的标签放大到最适合其文本的一行？

该labelWidth属性没有自动设置,将其完全保留与指定默认值100相同,这将导致冗长的文本突破多行:

http://jsfiddle.net/Qbw7r/

我想让标签尽可能宽地包含整个文本而不包装,可编辑字段填充剩余的可用宽度.

Answer 1

它对我有用：

 labelWidth: 300

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

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

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

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

Answer 2

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

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提供的注释中的示例.本质上,他的示例创建了文本字段的扩展,它根据标签动态设置标签宽度.这是他的例子:

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