extjs
Vanliga fallgropar och bästa metoder

Dela upp problemen

Värre

ViewController:

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

Se:

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

Bättre

ViewController:

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

Se:

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

Förklaring

I det här exemplet utför de två kodavsnitten samma uppgift. I händelse av att hänvisningen till myhappyfield förändras eller metoden för att indikera "lycka" förändras avsevärt, kräver den tidigare metoden förändringar varje plats referensen används.

Med separata oro (det senare exemplet) ger vyn ett abstrakt sätt att modifiera "lycka" som andra klasser kan använda. Frågan och komponentmanipulationen hålls på ett ställe (precis bredvid själva bilddefinitionen!) Och samtal till den abstraherade metoden behöver inte förändras.

Även om det är möjligt för en kontroller att tillåta fråga ner genom lagren i en vy, är det starkt tillrådligt att abstrahera detta beteende till metoder i vyn. På detta sätt kan en vy tillhandahålla standardiserade sätt för andra klasser att påverka den och minimera eller eliminera förändringar i andra klasser när strukturen för en vy ändras.

Förlängning vs åsidosättande

åsido~~POS=TRUNC:

Åsidosätt fil:

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

Använd i app:

{
    xtype: 'textfield'
}

Tillägg:

Åsidosätt fil:

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

Använd i app:

{
    xtype: 'cornfield'
}

Förklaring

ExtJS tillhandahåller två huvudsakliga sätt att ändra beteendet hos befintliga klasser: utöka dem och åsidosätta dem. Var och en har fördelar och fallgropar som bör beaktas innan du använder dem.

Genom att utvidga en klass skapas en ny klass som ärver dess beteende och konfiguration från dess överordnade. Genom att skapa en ny klass genom förlängning kan upprepade konfigurationer och beteendeförändringar göras på en central plats och återanvändas i hela applikationen. Den största fördelen med förlängningen är att förälderklassen förblir intakt och tillgänglig för enklare användningsfall där det utökade beteendet inte önskas.

Exempel på fall med bra användning för tillägg inkluderar anpassade formulärfält med speciellt beteende, specialiserade modaler och anpassade komponenter i allmänhet.

Att åsidosätta en klass ändrar beteendet hos en befintlig klass på plats. Konfigurering och metoder i åsidosättningar ersätter sina motsvarigheter i överordnade klass helt och skapar nya standardkonfigurationer och beteenden som fyller i hela applikationen. Överväganden bör användas sparsamt på grund av deras destruktiva natur. en utökad klass kan vanligtvis ge samma fördelar samtidigt som förälderklassen är ostörd.

Överskridelser kan emellertid ge fördelar i vissa situationer. Fall av bra användning inkluderar fixa buggar i befintliga klasser, ändra proxybeteende för att lägga till extra information till förfrågningar, till exempel ett token eller sessiondata, och generellt tvinga ett specifikt beteende att vara standardbeteendet i en applikation.

Separata åsidosättningar från bugfixes

I ExtJS kan du åsidosätta nästan alla metoder för ramverket och ersätta den med din egen. Detta gör att du kan ändra befintliga klasser utan att direkt ändra ExtJS-källkoden.

Ibland kanske du vill förbättra en befintlig klass eller tillhandahålla en förnuftig standardegenskap i en klass.

Till exempel kanske du vill att alla dina modelldatafält ska tillåta nollvärden.

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

I andra fall måste du fixa något som är trasigt inom ramen.

Här är ett exempel på en bug fix med dokumentation. Observera att klassnamnet innehåller "fix" snarare än "åsidosättande". Det faktiska namnet är inte viktigt, men separationen är det.

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

När det nu är dags att uppgradera till nästa version av ExtJS, finns det bara en plats du behöver kontrollera för att se vilka av dina buggfixar som kan tas bort.