Extjs 6: Was ist die Best Practice, um wiederholte Konfiguration zu behandeln?

Question

Wenn ich eine Ansichtsklasse definieren, muss ich viele wiederholte Konfigurationen für untergeordnete Komponenten festlegen. Hier

ein Beispiel:

Ext.define('TEST.view.transaction.TransactionEditor', { 
    extend: 'Ext.form.Panel', 
    ... 
    items: [{ 
     ... 
     labelWidth:80, 
     width: 230, 
     tdAttrs: { style: 'padding: 10px 20px 10px 20px;' }, 
     ... 
    },{ 
     ... 
     labelWidth:80, 
     width: 230, 
     tdAttrs: { style: 'padding: 10px 20px 10px 20px;' } 
     ... 
    }, 
    ... 
    ], 
    ... 
} 

Wie Sie sehen können, die labelwidth, Breite und Stil werden mehrmals wiederholt. Ich möchte anstelle dieser magischen Zahlen einige Konstanten oder Variablen verwenden. Was ist der richtige Weg, um es in EXTJS zu tun?

---

UPDATE: Die folgenden beiden Methoden nicht gut funktionieren.

1. mit Vorgaben arbeitet für labelwidth und Breite, funktioniert aber nicht für tdAttrs.

2. Mit der initComponent-Methode wurde die Komponente nicht mehr angezeigt.

   initcomponent: function() {

   var tdAttrs = { style: 'padding: 10px 20px 10px 20px;' }; 
       Ext.apply(this,{ 
        items:[{ 
         tdAttrs:tdAttrs 
        }]} 
       ); 
       this.callParent(arguments); 
   }, 
   

---

UPDATE2:

ich die Frage der tdAttrs nicht gelöst Arbeitsmethode 1. tdAttrs verwenden sollte stattdessen unter Layout Konfiguration gesetzt werden von Standardeinstellungen. Ich weiß nicht warum, aber hier ist der Arbeitscode.

layout: { 
    type: 'table', 
    // The total column count must be specified here 
    columns: 4, 
    tdAttrs: { style: 'padding: 5px 10px 5px 10px;' } 
}, 
defaults:{ 
    labelWidth:70, 
    width: 210 
}, 
items: [/* include child components here */ 
    { 
     ... 
    }, 
    { 
     ... 
    }, 
    ... 
] 

Für die initComponent-Methode weiß ich immer noch nicht, wie es geht. Bitte helfen Sie.

Answer 1

Es gibt verschiedene DRY (Don't Repeat Yourself) Ansätze in ExtJS.

Wenn die Werte in alle anwendbar Unterpunkte eines Behälters wiederholt werden, können Sie defaults verwenden:

Ext.define('TEST.view.transaction.TransactionEditor', { 
    extend: 'Ext.form.Panel', 
    defaults:{ 
     labelWidth:80, 
     width: 230, 
     tdAttrs: { style: 'padding: 10px 20px 10px 20px;' }, 
     queryMode:'local' // EXAMPLE: this will be added to all fields, but only have effect in combos! 
    }, 

Wenn sie nicht sind, können Sie Variablen definieren könnte:

var labelWidth=80, 
... 
Ext.define('TEST.view.transaction.TransactionEditor', { 
    extend: 'Ext.form.Panel', 
    ... 
     labelWidth:labelWidth, 

aber das ist nicht empfohlen, weil Sie dann eine Unordnung von globalen Variablen haben.Es ist besser, die ganze Artikel Definition in initcomponent zu setzen, denn dann werden die Variablen in dem Rahmen gehalten:

Ext.define('TEST.view.transaction.TransactionEditor', { 
    extend: 'Ext.form.Panel', 
    initComponent:function() { 
     var labelWidth = 80, 
      width = 230; 
     Ext.apply(this,{ 
      items:[{ 
        ... 
        labelWidth:labelWidth, 
        width: width, 
        ... 
       },{ 
        ... 
        labelWidth:labelWidth, 
        width: width, 
        ... 
       }, 
       ... 
       ], 
       ... 
      } 
     }); 
     this.callParent(arguments); 
    } 

oder, wenn sie alle von einem bestimmten xtype sind, sondern über mehrere Container, einen besonderen herzuleiten xtype, so dass anstelle von

items:[{ 
    xtype:'textfield', 
    labelWidth:125, 
},{ 
    xtype:'textfield', 
    labelWidth:125, 
},{ 
    xtype:'textfield', 
    labelWidth:125, 

Verwendung

items:[{ 
    xtype:'mytextfield' 
},{ 
    xtype:'mytextfield' 
},{ 
    xtype:'mytextfield' 

mit myTextField wobei als

definiert

Ext.define('MyTextField',{ 
    extend:'Ext.form.field.Text', 
    xtype:'mytextfield', 
    labelWidth:125, 
    ... 
});