2016-04-13 14 views
0

Ich bin ein Anfänger und ich versuche, die Anmeldeseite mit ExtJS6 zu erstellen. Der einfachste Weg, dies zu tun, ist eine panel mit Elementen wie 2 text fields (Benutzername und Passwort) und button zu erstellen, aber da das Textfeld für E-Mail und Passwort bei der Anmeldung erneut verwendet wird, möchte ich es vermeiden Code-Duplizierung. Da wir an beiden Stellen dieselben Validierungsregeln haben, müssen wir dieselben Titel für E-Mail und Passwort haben.E-Mail-Feldkomponente in ExtJS6 erstellen

ich die Schaffung eine E-Mail-Textfeld Komponentenklasse und das Kennwort Textfeld Klasse denke, die durch TextField Klasse und Gebrauchseigenschaften wie vtype verlängert werden wird, name in diesen benutzerdefinierten definieren Klassen und in Anmeldungsformular/Anmeldeformular Ich verwende diese benutzerdefinierten Felder, damit ich Code-Duplizierung vermeiden kann.

Ich möchte, dass andere Mitglieder dies kommentieren und mir sagen, ob dies die richtige Lösung ist oder nicht, und wenn ja, wie ich das erreichen werde.

Grüße

Antwort

4

ExtJS 6 stellt bereits eine email und einen password texfield. Sie können ihre Konfigurationseigenschaften verwenden, um mehr Validierungen anzuwenden.

Sie können Ihre eigene Form Feld wie folgt erstellen:

Ext.define('App.view.LoginPanel', { 
    extend: 'Ext.form.Panel', 
    fullscreen: true, 
    items: [ 
     { 
      xtype: 'fieldset', 
      title: 'Register', 
      items: [ 
       { 
        xtype: 'emailfield', 
        label: 'Email', 
        name: 'email' 
       }, 
       { 
        xtype: 'passwordfield', 
        label: 'Password', 
        name: 'password' 
       } 
      ] 
     } 
    ] 
}); 

und mehrere Instanzen davon verwenden, wo immer Sie wollen.

+0

Wenn wir uns als Komponente anmelden, reduzieren wir den Wiederverwendungskreis und erhöhen die Codeverdoppelung. Da diese Komponente als Ganzes nicht mehr im Projekt verwendet wird, sondern wenn wir sie wie Einheiten erstellen und E-Mails schreiben Textbox als Komponente, und setzen Sie Name, Validierungseigenschaften in seiner Komponentenklasse und verwenden Sie es, dann werden wir die Wiederverwendbarkeit verbessern und wir können auch Doppelarbeit vermeiden. – mubeen

+0

Es macht nicht viel Sinn für mich, eine benutzerdefinierte Komponente wie zu definieren: Nehmen wir an, Sie erweitern 'passwordfield' und legen seinen Namen fest. Wenn Sie jetzt wiederverwenden müssen, schreiben Sie {xtype: 'custom'}. Anstelle von {xtype: 'passwordfield', Name: 'password'}. Die Verwendung von Ext-Standardkomponenten ist an sich Wiederverwendbarkeit. Aber es liegt an Ihnen und Ihren Anforderungen, was Sie bevorzugen sollten. –