Question

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

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

我希望标签的宽度与包装整个文本所需的一样宽，而不包装，可编辑字段填充剩余的可用宽度。

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

Answer 2

这对我有用：

 labelWidth: 300

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

要使自动调整大小，您可以这样尝试：

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

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

Answer 3

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

Answer 4

一个简单的解决方案可能会对您的应用程序有所帮助，即覆盖＆＃39; onRender＆＃39;事件。使用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);
        }
    }
});

然后设置属性＆＃39; autoBoxLabelWidth＆＃39;真的＆＃39;或要添加的px数：

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
        }]

Answer 5

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

labelWidth: false,
labelStyle: 'width: auto'

Answer 6

您也可以尝试

width: '100%'

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

6 个答案: