I want to reduce space between label and text box, you can see in bellow image, I used Ext.form.field.Text control of ext JS. Please see bellow code for this control.

this.temp1min = new Ext.form.field.Text({
            xtype: 'textfield',
            /*  *///labelAlign: 'left',
            //labelWidth: 60,
            //width: '7%',
            //labelStyle: 'padding: 10px 10px;',
            //padding:'0 '
            fieldLabel: 'T1 Min',
            blankText: fleet.Language.get('_FLEET_REQUIRED_ERROR_'),
            //allowBlank: false,
            name: 'temp1min'
        });
        this.temp1max = new Ext.form.field.Text({
            xtype: 'textfield',
            //labelAlign: 'left',
            //labelWidth: 30,
            //width: '6%',
            fieldLabel: 'T1 Max',
            blankText: fleet.Language.get('_FLEET_REQUIRED_ERROR_'),
            // allowBlank: false,
            name: 'temp1max'
        });

And UI, Please see below image.

I want to reduce space between label and text box, you can see in bellow image, I used Ext.form.field.Text control of ext JS. Please see bellow code for this control.

this.temp1min = new Ext.form.field.Text({
            xtype: 'textfield',
            /*  *///labelAlign: 'left',
            //labelWidth: 60,
            //width: '7%',
            //labelStyle: 'padding: 10px 10px;',
            //padding:'0 '
            fieldLabel: 'T1 Min',
            blankText: fleet.Language.get('_FLEET_REQUIRED_ERROR_'),
            //allowBlank: false,
            name: 'temp1min'
        });
        this.temp1max = new Ext.form.field.Text({
            xtype: 'textfield',
            //labelAlign: 'left',
            //labelWidth: 30,
            //width: '6%',
            fieldLabel: 'T1 Max',
            blankText: fleet.Language.get('_FLEET_REQUIRED_ERROR_'),
            // allowBlank: false,
            name: 'temp1max'
        });

And UI, Please see below image.

• javascript
• extjs
• sencha-touch

• Are you using css in addition to js to control style? Please post if so. Also, why are you menting the width and labelwidth lines in your js? – SG_Rowin Commented Nov 4, 2017 at 5:21
• You can see other text control T2Min, T2Max I did unment that code for this control – Vikas Hire Commented Nov 4, 2017 at 6:23

2 Answers 2

You can use labelWidth:'auto';

The labelWidth of the fieldLabel in pixels. Only applicable if the labelAlign is set to "left" or "right".

Here I have created an sencha fiddle demo. Hope this will help you to solve your problem.

Ext.create('Ext.form.Panel', {
    title: 'Label width example',
    width: '100%',
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    defaults: {
      xtype: 'textfield',
        labelWidth: 'auto',
        margin: '0 5',
        allowBlank: false // requires a non-empty value
    },
    layout: 'hbox',
    items: [{
        fieldLabel: 'T1 Min',
        name: 'temp1min'
    },{
        fieldLabel: 'T1 Max',
        name: 'temp1min'
    }, {
        name: 'name',
        fieldLabel: 'Name',
    }, {
        name: 'email',
        fieldLabel: 'Email Address',
        vtype: 'email' // requires value to be a valid email address format
    }]
});

Labelwidth: 'auto'

does not work in extjs 6.0.x, it only accepts numbers.

edit: Found the answer.

To adjust the space between the label and the textfield, in extjs 6.0.x, you have to use the following code.

labelStyle: 'width: 30px'