ExtJs Tritonテーマコンポーネントのスタイリングの問題

Question

私はExtjs Tritonテーマを使用しています。フィールドのパディング、高さ、フォントサイズの値を減らしたいと考えています。私はいくつかの方法を試しましたが、私はそれをすることができませんでした。私はすべてのコンポーネントが少し大きい登場しているトリトンテーマに使用された場合。（たとえば、テキストフィールド、コンボ、...などのために）

Answer 1

あなたはこの小道具fieldSubTpl

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

を使用して、入力のデフォルトのTPLを変更することができますこの内部

Symply変更クラスやスタイル、あなたはなぜあなたは関連SASS変数を上書きしていない、あなたの入力フィールド

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;