logo标签列表

在ExtJS中自动调整文本框标签大小

javascriptcsslayoutextjsextjs4
6
在ExtJS中，是否可以使文本字段的标签大小最优化地适合一行文本？labelWidth属性没有自动设置，完全省略它与指定默认值100具有相同的效果，这将导致冗长的文本分成多行。

http://jsfiddle.net/Qbw7r/

我希望标签的宽度可以刚好容纳整个文本内容，不换行，并且可编辑字段填满其余可用宽度。
不要这样想。labelAlign:top怎么样？那应该会给你足够的空间。 - dbrin
6个回答
5
我喜欢nowrap的解决方案。 - GOTO 0
5
您还可以使用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()
});

如果您需要更一般的解决方案，请查看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);
    }
});
文档中的解决方案似乎不起作用：http://jsfiddle.net/Qbw7r/11/ 你实际尝试过吗？无论如何，当使用TextMetrics预先计算labelWidth并直接设置在配置中时，一切都正常。这正是我要寻找的东西。 - GOTO 0
它不起作用是因为您设置了“anchor: 100％”。如果您删除它，它就可以正常工作。请注意，在字段上指定“anchor”配置时，“labelWidth”似乎根本不起作用（无论是否使用扩展名）。 - Towler
无法使用，因为Sencha Architect不太适合定义initComponent，所以我监听“added”事件，在该处理程序中执行以下操作：textMetrics = new Ext.util.TextMetrics(); component.labelWidth = textMetrics.getWidth (component.fieldLabel + component.labelSeparator) + component.labelPad; textMetrics.destroy(); - codelion
1

您可以将标签宽度设置为自动。尝试这样做：

labelWidth: false,
labelStyle: 'width: auto'
1
我所做的是禁用textField的fieldLabel，并在textField前添加了Ext.form.Label。 Ext.form.Label具有shrinkWrap配置。希望这可以帮助您，如果您找到其他解决方法，而不需要修改组件的默认功能，请告诉我：）。 我应该说我正在使用Sencha Architect，这就是为什么我想尽可能少地添加自定义脚本的原因。
谢谢。在尝试按照您所说的操作后，组件没有显示在同一行上：http://jsfiddle.net/swvqaoj6/。我想我可能错过了什么。 - GOTO 0
0

你也可以尝试一下

width: '100%'
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
        }]
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接