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;