ExtJs 4: Wie erstelle ich ein dynamisches Menü?
Habe ich ein Menü-system-set-up in einem panel, die benötigt werden dynamisch erstellt. Habe ich eine statische mock-Menü, das der client mag, aber die Menü-Kategorien und Objekte müssen geladen werden über JSON von einem Geschäft.
Hier ist, was ich für die ersten paar Menüpunkte statisch:
Ext.define('SimpleSearch.view.FacetSDL' ,{
extend: 'Ext.panel.Panel',
alias : 'widget.facetsdl', //alias is referenced in MasterList.js
requires: ['SimpleSearch.store.SDLResults', 'FacetData' ],
title: 'Facet Search',
html: null,
frame: true,
layouts: 'fit',
items: [
{
id: 'group-menu',
title: 'Browse',
xtype: 'menu',
plain: true,
floating: false,
layouts: 'fit',
items: [
{
text: 'Security',
listeners:
{
click: function() {
var groupmenu = Ext.ComponentQuery.query('#group-menu')[0];
groupmenu.hide()
var securitymenu = Ext.ComponentQuery.query('#security-menu')[0];
securitymenu.setPosition(0,-groupmenu.getHeight(),false);
securitymenu.show()
}
},
menu: { //<-- submenu by nested config object
items: [
{
text: 'Classification',
listeners:
{
click: function() {
var groupmenu = Ext.ComponentQuery.query('#group-menu')[0];
groupmenu.hide()
var securitymenu = Ext.ComponentQuery.query('#security-menu')[0];
var classificationmenu = Ext.ComponentQuery.query('#classification-menu')[0];
classificationmenu.setPosition(0,-groupmenu.getHeight() - securitymenu.getHeight(),false);
classificationmenu.show()
}
Ich dachte, dass vielleicht die Erstellung einer Klasse, lädt alle erforderlichen Daten ein und Durchlaufen diese Klasse für die "items" - Feld kann der Weg zu gehen, aber ich bin mir nicht sicher, ob das funktionieren wird.
- Ich landete dynamisch laden der Bedienfeld-Menü, indem Sie eine for-Schleife über die JSON-Daten, tut eine Ansicht hinzufügen, dass für jedes neue element. Es sieht viel besser aus als auf den Baum und lässt mich passen die Dinge einfacher.
InformationsquelleAutor Elwar | 2012-10-16
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sollten Sie sich mit einem Baum und TreeStore. Dann nutzen Sie die
ui:'menu'
oderviewConfig { ui: 'menu' }
config Eigenschaften, die es zu unterscheiden von einem gewöhnlichen Baum. Dann style es jedoch Ihr Kunde will.Diese Weise haben Sie alle die Mechanismen, die für sich frei, um die Daten zu verarbeiten dynamisch und alle Ihre Untermenüs, Sie müssen nur ein wenig kreativ auf die CSS-Seite der Dinge.
Ich habe es funktioniert so:
Dann fügen Sie einfach
scrollMenu
auf das Formular oder den container. Hoffe, das hilft!In diesem Menü wird dynamisch erstellt, mit ExtJs, werden die Daten geladen, die aus Json.
Siehe meine demo mit dem code.
Demo Online:
https://fiddle.sencha.com/#view/editor&fiddle/2vcq
Json geladen:
https://api.myjson.com/bins/1d9tdd
Code Mit ExtJs: