Wie kann ich eine Textfield-Komponente in Extjs überschreiben und sie in mehreren Formen über die App verwenden?

Question

Ich denke eine Datei namens MyTextField.js in Ansichten zu erstellen und ihr Inhalt ist

Ext.define('MyTextField', 
{ 

override: 'Ext.field.Input', 
xtype: 'mytextfield', 

    updateValue: function(newValue) { 
     var input = this.input; 
     if (input && input.dom.value != newValue) { 
      input.dom.value = newValue; 
     } 
    } 
}); 

Und dann diese FormView.js in meiner anderen Ansicht verwendet

Ext.define('AnotherScreen', { 
    extend: 'Ext.form.Panel', 
    xtype: 'anotherscreen', 
    controller: 'controllerx', 
    viewModel: 'viewmodelx', 
    requires: [ 
     'MyTextField' 
    ], 
    layout: 'vbox', 
    items: [ 
      { xtype : mytextfield} 
    ] 

}); 

Aber dies nicht funktioniert, es gibt einen Fehler

**

Uncaught Error: [Ext.create] Unrecognized class name/alias: 
MyTextField 

**

Jede Idee ist sehr willkommen.

Answer 1

Sie haben mindestens drei Ausgaben, einer von ihnen ist Anführungszeichen um den xtype fehlt (sollte xtype : 'mytextfield' sein).

override weist Ext an, die alte Komponente zu überschreiben. So wird Ext.field.Input mit der von Ihnen definierten updateValue-Funktion überschrieben. Dies ändert jedes existierende Eingabefeld, weil sie alle von Ext.field.Input abgeleitet sind (z. B. Textfeld, Combo usw.), aber es erzeugt nicht einen neuen X-Typ mit dem Namen "Mytextfield". Um einen neuen xtype zu erstellen, erweitern Sie eine vorhandene Klasse (extend:'Ext.field.Input').

Endlich, die Idee bei der Verwendung erfordert, dass der Pfad und Name der Datei und der qualifizierte Name der Ansicht übereinstimmen. Wenn Sie eine Anwendung mit dem Namen MyAppName haben, definieren Sie in app/view/MyTextField.js die Komponente MyAppName.view.MyTextField. Wenn Sie dann requires:['MyAppName.view.MyTextField'] verwenden, sollte der Dateipfad korrekt aufgelöst werden, und Sie können von dort aus auf die Komponente per XType verweisen.

Answer 2

Ich glaube, Sie sollten extend verwenden, um Ihre benutzerdefinierte Klasse zu erstellen.

Und damit Ihre Klasse mit einem xtype erstellt wird, sollten Sie eine alias angeben.

So etwas wie unten sollte gezeigt arbeiten:

Ext.define('MyTextField', { 
    extend: 'Ext.field.Input', 
    alias: 'widget.mytextfield', 

    updateValue: function(newValue) { 
     var input = this.input; 
     if (input && input.dom.value != newValue) { 
      input.dom.value = newValue; 
     } 
    } 
}); 

Answer 3

Ich glaube, das sollte funktionieren. Wann immer wir eine Klasse definieren, sollten wir die Elternklasse erweitern und nicht überschreiben. Bitte ändern Sie die xxxx in die Paketnamen. Beim Definieren einer Klasse sollte es immer ein vollständig qualifizierter Name sein.

Ext.define('xxx.xxxx.xxxx.MyTextField', { 
      extend: 'Ext.field.Input', 
      alias: 'widget.mytextfield', 
      xtype: 'mytextfield',  
      updateValue: function(newValue) { 
       var input = this.input; 
       if (input && input.dom.value != newValue) { 
        input.dom.value = newValue; 
       } 
      } 
     });