Autosizing textfield label in ExtJS

问题

In ExtJS, is it possible to have the label of a textfield optimally sized to fit its text in one line?

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/

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.

回答1:

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

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

回答2:

It worked for me like that:

 labelWidth: 300

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

OR to make autosize, You could try it like that:

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

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

回答3:

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.

回答4:

One simple solution that could be helpful all over your app is to override the 'onRender' event. Using Ext.util.TextMetrics to calculate the text width:

(Here is an example on 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);
        }
    }
});

Then set the property 'autoBoxLabelWidth' to 'true' or number of px to add:

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

回答5:

You can actually set the label width as auto. Try this:

labelWidth: false,
labelStyle: 'width: auto'

回答6:

You can also try

width: '100%'

来源：https://stackoverflow.com/questions/18791661/autosizing-textfield-label-in-extjs

标签

javascript

css

layout

extjs

extjs4