extjs Schrumpfbereich zwischen den Anzeigefeldern (Beschriftungen und Werte)

Question

Wie verkleinere ich den Bereich zwischen diesen Anzeigefeldern? Ich habe versucht, Padding bewegen ... Margen ... nichts scheint zu funktionieren. Wenn ich die Beschriftungen so öffne, wie sie aussehen sollen (mit sehr wenig Platz) ... dann werden die Werte nicht korrekt neben dem Etikett ausgerichtet.

das ist, wie ich es Setup haben.

      layout: 'column', 
         defaults: { 
          layout: 'form', 
          xtype: 'container', 
          //defaultType: 'textfield', 
          style: 'width: 50%' 
         }, 
         items: [{ 
          items: [ 
           { 
            xtype: 'displayfield', 
            fieldLabel: 'Client', 
            bind: { 
             value: '{selectedClientListModel.ClientName}' 
            }, 
            fieldStyle: 'color: #ff0000; padding: 0px; margin: 0px;', 
            labelStyle: 'color: #ff0000; padding: 0px; margin: -5px;' 
            //ui: 'dark' 
           }, 
           { 
            xtype: 'displayfield', 
            fieldLabel: 'Acct Desc', 
            itemId: 'textfieldAcctDesc', 
            bind: { 
             value: '{selectedManager.AcctShortCode}' 
            }, 
            fieldStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: 0px;', 
            labelStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: -15px;' 
           }, 
           { 
            xtype: 'displayfield', 
            fieldLabel: 'Acct Num', 
            itemId: 'textfieldAcctNum', 
            bind: { 
             value: '{selectedManager.AcctNum}' 
            }, 
            fieldStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: 0px;', 
            labelStyle: 'color: #ff0000; line-height: 1; padding: 0px; margin: -5px;' 
           } 
          ] 
         }, { 

Answer 1

displayfields sollen ordentlich mit anderen Formularfelder auszurichten - die um ihre Eingabefelder großen Grenzen haben. Aus diesem Grund, displayfields have the same height, they even haven't got a different SCSS variable for displayfield height.

Darüber hinaus kann das FeldLabel aus den verfügbaren CSS-Klassen nicht zwischen der Beschriftung eines Anzeigefelds und der Beschriftung eines anderen Feldes unterscheiden. Aus diesem Grund müssen Sie Ihrem Anzeigefeld mindestens eine benutzerdefinierte userCls geben, sonst werden alle Ihre regulären Formularfelder lächerlich aussehen.

Dann können Sie einige CSS so gehen und hinzufügen:

.myUserCls, 
.myUserCls .x-form-item-label, 
.myUserCls .x-form-display-field 
{ 
    line-height:16px; 
    min-height:16px; 
    margin-bottom:0; 
    margin-top:0; 
    padding-top:0; 
} 

I have made you a fiddle.