Submenüs für Adobe AIR in ExtJS
ExtJS ist ein geniales Framework und wenn es um Adobe AIR geht, kommt man fast nicht daran vorbei damit seine Benutzeroberfläche zu gestalten. Nun ist in ExtJS zwar grundsätzlich das System-Menü von Adobe AIR integriert, aber leider nur grundsätzlich. Ich habe mich etwas damit gespielt und eine JavaScript Function geschrieben die auch Submenüs für das System-Menü möglich macht.[ad]
Um nun so ein Submenü in ExtJS zu erhalten muss man zuerst etwas an der ext-air.js rumschrauben und eine neue Function einfügen.
Dazu geht man in die Nähe der Linie 1586 und gibt folgende Function ein:
function createSubmenu(text, submenu, item) {
var newMenu = item.addItem(new air.NativeMenuItem(text));
newMenu.mnemonicIndex = 0;
newMenu.submenu = new air.NativeMenu();
for (var i = 0, len = submenu.length; i < len; i++) {
if (!submenu[i].menu) {
newMenu.submenu.addItem(submenu[i] == '-' ? new air.NativeMenuItem("", true) : Ext.air.MenuItem(submenu[i]));
} else {
createSubmenu(submenu[i].text, submenu[i].menu, newMenu.submenu);
}
}
}
Danach muss auch in der add-Function noch etwas hinzugefügt werden sodass diese Function so aussieht:
add: function(text, actions, mindex){
var item = find(menu, text);
if(!item){
item = menu.addItem(new air.NativeMenuItem(text));
item.mnemonicIndex = mindex || 0;
item.submenu = new air.NativeMenu();
}
for (var i = 0, len = actions.length; i < len; i++) {
if (!actions[i].menu) {
item.submenu.addItem(actions[i] == '-' ? new air.NativeMenuItem("", true) : Ext.air.MenuItem(actions[i]));
} else {
createSubmenu(actions[i].text, actions[i].menu, item.submenu);
}
}
return item.submenu;
},
Das wars eigentlich schon. Um nun ein Submenü zu erhalten genügt es das Menü wie folgt aufzubauen:
menubar.add('File', [{
text: 'New...',
menu: [{
text: 'New Documentation ...',
menu: [{
text: 'Documentation 1',
},{
text: 'Documentation 2 ...',
menu: [{
text: 'Documentation 3',
}]
}]
},{
text: 'New Something else',
}],
}]);
