ExtJs Triton主题组件的样式问题

Question

我使用Extjs Triton主题，我想减少一些字段的填充，高度和字体大小值。我尝试了一些方法，但我无法做到。当我习惯triton主题时，所有组件都显得有点大。（例如TextField，Combo，...等）

Answer 1

您可以使用此道具fieldSubTpl

修改输入的默认tpl

 Ext.create({
        xtype: 'textfield',
        value: 'test',
        fieldSubTpl: [
            '<input id="{id}" data-ref="inputEl" type="{type}" {inputAttrTpl}',
            ' size="1"', // allows inputs to fully respect CSS widths across all browsers 
            '<tpl if="name"> name="{name}"</tpl>',
            '<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
            '<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
            '{%if (values.maxLength !== undefined){%} maxlength="{maxLength}"{%}%}',
            '<tpl if="readOnly"> readonly="readonly"</tpl>',
            '<tpl if="disabled"> disabled="disabled"</tpl>',
            '<tpl if="tabIdx != null"> tabindex="{tabIdx}"</tpl>',
            '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
            '<tpl if="ariaEl == \'inputEl\'">',
            '<tpl foreach="ariaElAttributes"> {$}="{.}"</tpl>',
            '</tpl>',
            '<tpl foreach="inputElAriaAttributes"> {$}="{.}"</tpl>',
            ' class="{fieldCls} {typeCls} {typeCls}-{ui} {editableCls} {inputCls}" autocomplete="off"/>', {
                disableFormats: true
            }
        ],
        renderTo: Ext.getBody()
    });

在此内部更改课程或风格，您将成为输入字段的画家

Answer 2

This is what we changed to arrive at the smaller look:

Add these vars to your themes sass variables:

$form-field-font-size: 12px;
$form-field-font-weight: 600;
$form-field-height: 23px;
$form-field-padding: 2px 6px 2px 2px;
$form-label-font-size: 12px;
$form-label-horizontal-spacing: 4px;
$form-label-line-height: 14px;
$form-label-vertical-spacing: 4px;
$form-display-field-font-weight: 600;