6

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

该labelWidth属性没有自动设置，完全省略它与指定默认值 100 具有相同的效果，这将导致冗长的文本跨越多行：

http://jsfiddle.net/Qbw7r/

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

4

6 回答 6

5

您还可以使用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()
});

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

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);
    }
});
于 2013-09-17T00:13:47.050 回答
5

它对我有用：

 labelWidth: 300

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

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

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

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

于 2013-09-13T20:41:42.857 回答
1

what I have done was to disable the fieldLabel for the textField and add a Ext.form.Label in front of the textField. Ext.form.Label has the shrinkWrap config. I hope this helps and if you figured other workarounds that does not imply modifying the default functionality of the components please let me know :). I should say that I am using Sencha Architect and that's why I would like to add custom scripts as little as possible.

于 2014-12-10T13:53:16.610 回答
1

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

labelWidth: false,
labelStyle: 'width: auto'
于 2017-10-19T16:53:08.757 回答
0

你也可以试试

width: '100%'
于 2017-10-20T17:00:08.717 回答
0

一种对整个应用程序都有帮助的简单解决方案是覆盖“onRender”事件。使用 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);
        }
    }
});

然后将属性“autoBoxLabelWidth”设置为“true”或要添加的像素数：

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
        }]
于 2017-05-28T13:18:56.843 回答