Erstellt ein Kontextmenü für eine Zeile in einem Ext.grid.GridPanel. Das Event kann über die “listeners” Konfigurationsoption oder die Methoden “on”, bzw. “addListener” registriert werden.

{
  "contextmenu": function(grid, rowIndex, event)
  {
    var menu = new Ext.menu.Menu();
    menu.showAt(event.getXY());
    event.stopEvent();
  }
}

Einträge können dem Menü über die Methoden “add” bzw. “addItem” hinzugefügt werden, wobei letztere nur ein bereits existierendes Objekt der Klasse Ext.menu.Item akzeptiert und erstere alles, was sich innerhalb eines Menüs darstellen läßt:

// Create the menu
var menu = new Ext.menu.Menu();

// Create a menu item to add by reference
var menuItem = new Ext.menu.Item({ text: ‘New Item!’ });

// Add a bunch of items at once using different methods.
// Only the last item added will be returned.
var item = menu.add(
    menuItem,                // add existing item by ref
    ‘Dynamic Item’,          // new TextItem
    ‘-’,                     // new separator
    { text: ‘Config Item’ }  // new item by config
);

Jozef Sakalos beschreibt in seinem Beitrag Writing_a_Big_Application_in_Ext wie man durch Erweiterung der GUI Klassen von Ext JS zu sauber gekapselten Komponenten kommt. Leider bin zumindest ich noch nicht dahinter gekommen, was genau man zu welchem Zeitpunkt machen darf - und die JS Fehlermeldungen irgendwo in der ext-all.js sind da nicht wirklich hilfreich.

Hier ein funktionierendes Beispiel für den Tree. Wie einfach zu erkennen, wird fast alles über die Konfig-Optionen gesetzt - bis auf die Root-Node des Trees. Diese kann nicht über Optionen und auch nicht in der initComponent Funktion gesetzt werden. Vielleicht spart es dem ein oder anderen, ein paar Minuten suchen


/**
* Logviewer tree panel
* TreePanel für die Auswahl der anzuzeigenden Section
*
* @author christoph.luetjen
*/
Logviewer.TreePanel = Ext.extend(Ext.tree.TreePanel, {
region: 'west',
animate: true,
title: 'Logdatei',
split: true,
width: 225,
minSize: 175,
maxSize: 400,
useArrows: true,
autoScroll: true,
rootVisible: false,
collapsible: true,
containerScroll: true,
loader: new Ext.tree.TreeLoader({
dataUrl: 'http://acbase.chris.intra/htdocs/logviewer/sections'
}),

/**
* Set root node
* Scheinbar kann man die nicht innerhalb von initComponent
* setzen. Daher beim Rendern.
*
*/
onRender: function(){
var root = new Ext.tree.AsyncTreeNode({
text: 'root',
draggable: false
});
this.setRootNode(root);

Logviewer.TreePanel.superclass.onRender.apply(this, arguments);
}
});