Ich versuche ein vertikales Navigationsmenü auf der linken Seite einer Webseite mit ExtJS zu erstellen. Ich inspiriere das Beispiel-Dashboard unter http://examples.sencha.com/extjs/6.0.0/examples/admin-dashboard/. Selbst das Googlen lieferte keinen Beispielcode. Wenn jemand mit einem Beispielcode helfen kann, würde ich es sehr schätzen.Vertikales Navigationsmenü (linke Seite der Seite) mit Ext JS
Für das Beispiel sieht es so aus, als ob sie die Registerkarte verwenden, um diese Funktion zu erreichen.
Fügen Sie innerhalb der Registerkarte zwei Konfigurationen tabPosition: 'left' und tabRotation: 0 hinzu, dann haben Sie die Registerkarten auf der linken Seite. Und dann können Sie entweder cls oder ui configs verwenden, um den Stil anzuwenden.
Auch Ext JS Kitchen Sink hat die Beispiele. Überprüfen Sie den unten stehenden Link: http://examples.sencha.com/extjs/6.0.2/examples/kitchensink/#side-navigation-tabs
Damals, ich habe es wie folgt:
Wenn Sie den HTML-Quellcode schauen in („Inspect Element“), können Sie sehen, dass der linke Teil HTML beginnt
<div class="x-treelist ...
, die Sie in Richtung xtype:'treelist' Punkte (wie x-panel für xtype:'panel' und x-container ist für xtype:'container').
Die Dokumentation sollte Ihnen dann alles liefern, was Sie über die allgemeine Verwendung wissen müssen; Einzelheiten darüber, wie Sencha in diesem speziellen Fall haben es geschafft, können Sie in Ihrem Browser Konsole eingeben:
console.log(Ext.ComponentQuery.query("treelist")[0]);
Mindestens Chrome Sie die Komponente zurück, wo Sie durch alle Eigenschaften navigieren können zum Beispiel zu sehen, Welche Konfigurationen sie verwenden usw.
Für das relevante CSS können Sie durch den DOM-Baum navigieren und die relevanten CSS-Informationen von der Registerkarte CSS in Ihr Projekt kopieren, z.
.x-treelist-navigation {
background-color: #32404e;
background-position-x: 44px;
padding: 0 0 0 0;
}
...