如何减少extjs中标签和文本框之间的空间？

Posted 2021-05-06

我想减少标签和文本框之间的空间，你可以在下图中看到，我使用了ext JS的Ext.form.field.Text控件。请参阅以下代码了解此控件。

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

和UI，请看下图。

答案

你可以使用labelWidth:'auto';

fieldLabel的labelWidth以像素为单位。仅在labelAlign设置为“left”或“right”时适用。

在这里，我创建了一个sencha fiddle演示。希望这能帮助您解决问题。

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'

在extjs 6.0.x中不起作用，它只接受数字。

编辑：找到答案。

要调整标签和文本字段之间的空间，在extjs 6.0.x中，您必须使用以下代码。

labelStyle: 'width: 30px'