extjs
Häufige Fallstricke & Best Practices

Trennung von Bedenken

Schlechter

ViewController:

// ...
myMethod: function () {
    this.getView().lookup('myhappyfield').setValue(100);
}
//...

Aussicht:

//...
items: [
    {
        xtype: 'textfield',
        reference: 'myhappyfield'
    }
]
//...

Besser

ViewController:

// ...
myMethod: function () {
    this.getView().setHappiness(100);
}
//...

Aussicht:

//...
items: [
    {
        xtype: 'textfield',
        reference: 'myhappyfield'
    }
],
setHappiness: function (happiness) {
    this.lookup('myhappyfield').setValue(happiness);
}
//...

Erläuterung

In diesem Beispiel führen die beiden Codefragmente dieselbe Aufgabe aus. Für den Fall, dass sich der Verweis auf myhappyfield ändert oder die Methodik des Anzeigens von "Glück" signifikant ändert, erfordert der frühere Ansatz Änderungen an jedem Ort, an dem der Verweis verwendet wird.

Bei getrennten Anliegen (letztes Beispiel) bietet die Ansicht eine abstrahierte Möglichkeit, das von anderen Klassen verwendete Glück zu ändern. Die Abfrage und die Komponentenmanipulation werden an einer Stelle (direkt neben der Sichtdefinition selbst!) Aufbewahrt, und die Aufrufe der abstrahierten Methode müssen nicht geändert werden.

Obwohl es für einen Controller möglich ist, das Abfragen durch die Ebenen einer Ansicht zuzulassen, ist es dringend ratsam, dieses Verhalten in Methoden in der Ansicht zu abstrahieren. Auf diese Weise kann eine Ansicht standardisierte Möglichkeiten für andere Klassen bereitstellen, um sie zu beeinflussen und Änderungen an anderen Klassen zu minimieren oder zu eliminieren, wenn sich die Struktur einer Ansicht ändert.

Erweitern vs. Überschreiben

Überschreibungen:

Datei überschreiben:

Ext.define('MyApp.override.CornField',
    override: 'Ext.form.field.Text',
    initComponent: function () {
        this.callParent(arguments);
        this.setValue('Corn!');
    }
);

Verwendung in der App:

{
    xtype: 'textfield'
}

Erweiterungen:

Datei überschreiben:

Ext.define('MyApp.form.field.CornField',
    extend: 'Ext.form.field.Text',
    alias: 'widget.cornfield',
    initComponent: function () {
        this.callParent(arguments);
        this.setValue('Corn!');
    }
);

Verwendung in der App:

{
    xtype: 'cornfield'
}

Erläuterung

ExtJS bietet zwei Möglichkeiten, das Verhalten vorhandener Klassen zu ändern: Erweitern und Überschreiben. Jeder hat Vorteile und Fallstricke, die vor der Verwendung beachtet werden sollten.

Durch Erweitern einer Klasse wird eine neue Klasse erstellt, die das Verhalten und die Konfiguration von ihrem übergeordneten Element übernimmt. Durch Erstellen einer neuen Klasse durch Erweiterung können wiederholte Konfigurations- und Verhaltensänderungen an einem zentralen Ort vorgenommen und in der gesamten Anwendung wiederverwendet werden. Der größte Vorteil der Erweiterung ist, dass die übergeordnete Klasse intakt bleibt und für einfachere Anwendungsfälle verfügbar ist, in denen das erweiterte Verhalten nicht erwünscht ist.

Beispiele für gute Anwendungsfälle für Erweiterungen sind benutzerdefinierte Formularfelder mit speziellem Verhalten, spezielle Modale und generell benutzerdefinierte Komponenten.

Durch das Überschreiben einer Klasse wird das Verhalten einer vorhandenen Klasse geändert. Konfiguration und Methoden in Überschreibungen ersetzen ihre übergeordneten Klassengegenstücke vollständig und erstellen neue Standardkonfigurationen und Verhaltensweisen, die in der gesamten Anwendung vorhanden sind. Überschreibungen sollten wegen ihrer zerstörerischen Verwendung sparsam eingesetzt werden. Eine erweiterte Klasse kann normalerweise die gleichen Vorteile bieten, während die übergeordnete Klasse nicht beeinträchtigt wird.

Überschreibungen können jedoch in bestimmten Situationen Vorteile bieten. Gute Anwendungsfälle umfassen das Beheben von Fehlern in vorhandenen Klassen, das Ändern des Proxy-Verhaltens zum Anhängen zusätzlicher Informationen an Anforderungen (z. B. Token- oder Sitzungsdaten) sowie das Erzwingen eines bestimmten Verhaltens als Standardverhalten in einer Anwendung.

Überschreibungen von Bugfixes trennen

In ExtJS können Sie nahezu jede Methode des Frameworks überschreiben und durch Ihre eigene ersetzen. Dadurch können Sie vorhandene Klassen ändern, ohne den ExtJS-Quellcode direkt zu ändern.

In einigen Fällen möchten Sie möglicherweise eine vorhandene Klasse erweitern oder eine normale Standardeigenschaft für eine Klasse bereitstellen.

Beispielsweise möchten Sie möglicherweise, dass alle Modelldatenfelder Nullwerte zulassen.

Ext.define('MyApp.override.DataField', {
  override: 'Ext.data.field.Field',
  allowNull: true
});

In anderen Fällen müssen Sie etwas reparieren, das im Framework fehlerhaft ist.

Hier ist ein Beispiel für eine Fehlerbehebung mit Dokumentation. Beachten Sie, dass der Klassenname "fix" statt "override" enthält. Der tatsächliche Name ist nicht wichtig, aber die Trennung ist.

Ext.define('MyApp.fix.FieldBase', {
  override: 'Ext.form.field.Base',
  /**
   * Add a description of what this fix does.
   * Be sure to add URLs to important reference information!
   *
   * You can also include some of your own tags to help identify
   * when the problem started and what Sencha bug ticket it relates to.
   *
   * @extversion 5.1.1
   * @extbug EXTJS-15302
   */
  publishValue: function () {
    this.publishState('value', this.getValue());
  }
});

Wenn Sie jetzt auf die nächste Version von ExtJS upgraden möchten, müssen Sie nur noch an einer Stelle nachsehen, welche Ihrer Bugfixes entfernt werden können.