Automatic text field labeling in ExtJS

Question

In ExtJS, is it possible to have a text box label with the optimal size to fit its text on one line?

The labelWidth property labelWidth not have automatic adjustment, and its complete exclusion has the same effect as setting the default value to 100, which will break long text on several lines:

http://jsfiddle.net/Qbw7r/

I would like to have the label as wide as required to contain all the text without wrapping, and the editable field fills the remaining available width.

Answer 1

You can also use Ext.util.TextMetrics to measure the length of your label and set labelWidth . (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, see the example in the comment provided by slemmon in ExtJS docs . Essentially, his example creates a text field extension that dynamically sets the label width based on the label. Here is an example of it:

 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

This worked for me like this:

  labelWidth: 300 

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

OR do autosize , you can try this as follows:

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

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

Answer 3

what I did was disable fieldLabel for textField and add Ext.form.Label in front of the text field. Ext.form.Label has a shrinkWrap configuration. I hope this helps, and if you come up with other workarounds that do not imply changing the default functionality for the components, please let me know :). I have to say that I use Sencha Architect, and therefore I would like to add custom scripts as little as possible.

Answer 4

One simple solution that can be useful throughout the application is to override the onRender event. Using Ext.util.TextMetrics to calculate text width:

(Here is an example on a radio group)

 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 'autoBoxLabelWidth' property to 'true' or the 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 }] 

Answer 5

In fact, you can set the width of the label as automatically. Try the following:

 labelWidth: false, labelStyle: 'width: auto' 

Answer 6

You can also try

 width: '100%'