ExtJS: Komponente VS Element VS andere

Sie können eine Menge über die Bausteine ​​von ExtJS (bekannt als Ext Core) aus dem Handbuch dafür herausfinden: Ссылка . Ich werde versuchen, etwas Wissen hinzuzufügen und einige Schlüsselpunkte hervorzuheben, aber Sie sollten das für einen sehr informativen Überblick definitiv durchlesen.

Ext.Komponente
Der Baustein für das OOP-Paradigma in ExtJS. Im Wesentlichen ist dies ein Objekt, das geerbte Funktionen enthält, die als Grundlage für eine spezialisierte Komponente dienen, die vom Framework in DOM-Elemente umgewandelt wird, die als HTML angezeigt werden.

Die Sencha-Dokumentation ist dafür hervorragend. Hier sind ein paar gute Startpunkte: Ссылка Ссылка

Ext.Element vs DOM Element
Wie ein JavaScript-Entwickler weiß, ist ein DOM-Element nur ein JS-Objekt, das ein Tag im HTML des Dokuments darstellt. Im Wesentlichen ist Ext.Element ein Wrapper-Objekt für ein DOM-Element, mit dem ExtJS das Objekt manipulieren kann. Jedes DOM-Element auf der Seite kann als Ext.Element eingebunden werden, um diese zusätzliche Funktionalität zu ermöglichen.

Nehmen wir zum Beispiel dieses HTML-Tag:

Sie können darauf mit

und verwenden Sie die grundlegende integrierte DOM-Funktionalität von JavaScript für el . Sie können auch mit

und eine ganze Reihe zusätzlicher Funktionen zur Verfügung haben, die mit der ExtJS-Bibliothek auf dieses Element angewendet werden können

Die Sencha-Dokumente sind auch dafür hervorragend. Sehen Sie alle verfügbaren Funktionen für Ext.Element hier: Ссылка

Verschiedenes
Sie können eine Ext.Element von einer Komponente mit der Methode getEl() erhalten:

Sie müssen nur selten den anderen Weg gehen, um eine Komponente aus einem DOM-Element zu bestimmen. Es gibt dort nicht viel Anwendungsfall, es sei denn, Sie hacken wirklich etwas. Ein wichtiger Grund für die Verwendung eines Frameworks wie ExtJS ist es, zu verhindern, dass man so etwas machen muss; Wenn Sie sich vollständig innerhalb von JavaScript entwickeln sollten, sollten Sie in der Lage sein, einen Verweis auf ein DOM-Element zu vermeiden, für das Sie die ExtJS-Komponente benötigen.

Niklas hat ziemlich gut geantwortet, wie man Komponenten und Elemente auswählt. Die einzigen Dinge, die ich wirklich hinzufügen würde, ist, dass Sie up() und down() relativ zu einer Komponente auswählen können. Auf diese Weise sollten Sie itemId für Komponenten und nicht den globalen Bezeichner id verwenden (die Verwendung von id kann schwer zu debuggende Fehler verursachen, wenn Sie Komponenten mit derselben ID erneut verwenden).

Um Niklas 'Antwort zum Einblenden / Ausblenden von Komponenten hinzuzufügen, fügt das Framework in der Tat etwas CSS zum Element der Komponente hinzu, abhängig davon, wie hoch hideMode für die Komponente ist. Erfahren Sie mehr über diese Eigenschaft hier: Ссылка

Eine hervorragende Möglichkeit, mehr zu lernen, ist es, alle Beispiele zu betrachten, die mit dem Framework geliefert werden. Öffnen Sie die Beispiele in Ihrem Browser und sehen Sie sich den Code an, um herauszufinden, wie die Dinge erledigt werden. Sie werden es auf diese Weise einfacher finden, als es auf Papier oder auf einer Website zu lesen. Nichts geht über die Erfahrung, wenn es darum geht, etwas Neues zu lernen.

So wählen Sie aus: nach ID, nach Klasse, über Eltern, suchen (OR Kinder ODER Abfrage ODER wählen? WTF), Geschwister, ComponentQuery, DOM-Abfrage, CSS-Abfrage, etc ..

Wie man in der Baumstruktur manipuliert: Erstellen, Anhängen, Vorgeben, Einfügen nach diesem Geschwister, Bewegen zu diesem Elternteil, Entfernen, Zerstören, etc ..

Schaltfläche zu einer Ansicht hinzufügen:

Es gibt auch insert , remove und so weiter, abhängig von dem Steuerelement, das Sie abfragen.

So bearbeiten Sie auf dem Bildschirm: einblenden, ausblenden, ausblenden, nach oben oder unten verschieben, Größe ändern usw.

Es gibt auch show , disable , enable und so weiter, abhängig von dem Steuerelement, das Sie abfragen.

So identifizieren Sie sich miteinander: Finden Sie DOM.Element mit seiner Ext.Component, finden Sie Ext.Component mit seinem DOM.Element usw.

Das Finden von Ext.Component wissend, dass Dom.Element ziemlich einfach ist, du nimmst einfach die ID aus dem DOM Element und benutzt Ext.ComponentQuery.query("#id") . Es gibt auch Ext.select('#id') , um das Objekt von einer ID abzurufen.

Mit der Elementeigenschaft können Sie das DOM erhalten:

Was ist die Abhängigkeit zwischen ihnen: was passiert mit dem DOM.Element, wenn seine Ext.Component ausgeblendet / zerstört / geändert / verschoben wird, was passiert mit der Ext.Component, wenn es Ext.Element ist versteckt / zerstört / verändert / verschoben usw.

Ich denke, ich bin mir nicht sicher, ob, wenn Sie zum Beispiel .hide aufrufen, ein paar CSS auf das DOM angewendet werden: display: none . Intern können sie ein Framework wie jQuery für diese oder die alte Schulversion document.getElementById('id').css und so eins verwenden. Wenn du .show aufruft, kann es sich in display: block oder einen anderen Typ ändern (dies könnte in der Sencha Touch-Klasse gespeichert werden).

Ich weiß nicht, was passiert, wenn das DOM-Element zerstört wird. Wahrscheinlich das Element auch und dann hat der Müllsammler etwas zu tun.

Wenn noch weitere Fragen / etwas unklar oder nicht genug sind, zögern Sie nicht zu fragen.

Ein Versuch, die Frage selbst zu beantworten.

Da keine TABLE-Markup-Unterstützung auf dieser Website bietet , Stelle ich meine Antwort in diese freigegebene Tabelle . Beachten Sie die Kommentare zum Maus-Rollover.

Es ist nur ein Muster für jetzt. Es braucht Arbeit, um lesbarer und vollständiger zu werden. Fühlen Sie sich frei zu kommentieren, oder fragen Sie mich, wenn Sie es bearbeiten möchten.