extjs
Veel voorkomende valkuilen en best practices

Scheiding van zorgen

Erger

ViewController:

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

Visie:

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

Beter

ViewController:

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

Visie:

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

Uitleg

In dit voorbeeld voeren de twee codefragmenten dezelfde taak uit. In het geval dat de verwijzing naar myhappyfield verandert of de methode om 'geluk' aan te geven aanzienlijk verandert, vereist de vorige benadering wijzigingen op elke plaats waar de referentie wordt gebruikt.

Met afzonderlijke zorgen (het laatste voorbeeld) biedt de weergave een geabstraheerde manier om 'geluk' te wijzigen dat andere klassen kunnen gebruiken. De query's en componentmanipulatie worden op één plaats bewaard (direct naast de viewdefinitie zelf!) En de aanroepen van de geabstraheerde methode hoeven niet te veranderen.

Hoewel het voor een controller mogelijk is om door de lagen van een view naar beneden te zoeken, is het ten zeerste aan te raden dat gedrag samen te vatten in methoden in de view. Op deze manier kan een weergave gestandaardiseerde manieren bieden voor andere klassen om deze te beïnvloeden en wijzigingen in andere klassen te minimaliseren of te elimineren wanneer de structuur van een weergave verandert.

Verlengen versus opheffen

Overschrijvingen:

Bestand overschrijven:

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

Gebruik in app:

{
    xtype: 'textfield'
}

extensions:

Bestand overschrijven:

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

Gebruik in app:

{
    xtype: 'cornfield'
}

Uitleg

ExtJS biedt twee belangrijke manieren om het gedrag van bestaande klassen te veranderen: ze uitbreiden en vervangen. Elk heeft voordelen en valkuilen die moeten worden overwogen voordat u ze gebruikt.

Als een klasse wordt uitgebreid, wordt een nieuwe klasse gemaakt die het gedrag en de configuratie van zijn bovenliggende ervaart. Door het creëren van een nieuwe klasse door uitbreiding, kunnen herhaalde configuratie- en gedragsveranderingen worden aangebracht op een centrale locatie en worden hergebruikt in de hele applicatie. Het grootste voordeel van uitbreiding is dat de bovenliggende klasse intact blijft en beschikbaar is voor eenvoudiger gebruik waarbij het uitgebreide gedrag niet gewenst is.

Voorbeelden van goede use-cases voor extensies zijn aangepaste formuliervelden met speciaal gedrag, gespecialiseerde modals en aangepaste componenten in het algemeen.

Het opheffen van een klasse wijzigt het gedrag van een bestaande bestaande klasse. Configuratie en methoden in vervangingen vervangen de tegenhangers van de bovenliggende klasse volledig, waardoor nieuwe standaardconfiguraties en gedrag worden gecreëerd dat door de hele applicatie heen loopt. Overschrijvingen moeten spaarzaam worden gebruikt vanwege het destructieve karakter van hun gebruik; een uitgebreide klasse kan doorgaans dezelfde voordelen bieden, terwijl de bovenliggende klasse ongestoord blijft.

Overschrijvingen kunnen in sommige situaties echter voordelen bieden. Goede use cases omvatten het oplossen van bugs in bestaande klassen, het wijzigen van proxygedrag om extra informatie aan verzoeken toe te voegen, zoals een token of sessiegegevens, en in het algemeen een specifiek gedrag dwingen om het standaardgedrag in een toepassing te zijn.

Afzonderlijke overschrijvingen van bugfixes

In ExtJS kunt u bijna elke methode van het framework overschrijven en deze door uw eigen methode vervangen. Hiermee kunt u bestaande klassen wijzigen zonder de ExtJS-broncode direct te wijzigen.

Soms wilt u een bestaande klasse verbeteren of een normale standaardeigenschap voor een klasse bieden.

U wilt bijvoorbeeld dat al uw modelgegevensvelden null-waarden toestaan.

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

In andere gevallen moet u iets repareren dat in het kader is gebroken.

Hier is een voorbeeld van een bugfix met documentatie. Merk op dat de klassenaam "fix" bevat in plaats van "opheffen". De daadwerkelijke naam is niet belangrijk, maar de scheiding wel.

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

Als het nu tijd is om te upgraden naar de volgende versie van ExtJS, is er maar één plaats die u hoeft te controleren om te zien welke van uw bugfixes kunnen worden verwijderd.