Kleines Beispiel, für eine ComboBox, die Ihre Daten einmalig per JSON vom Server holt und anschließend innerhalb dieser Daten beim Tippen automatisch auswählt bzw. vervollständigt.

// innerhalb von initComponent Methode

var store = new Ext.data.JsonStore({
    url: '/admin/spider/categorylist',
    root: 'rows',
    autoLoad: true,
    fields: ['id', 'name']
});

Ext.apply(this, {
    items:
    [{
        xtype: 'combo',
        fieldLabel: 'Kategorie',
        name: 'category',
	store: store,
        forceSelection: true,
        mode: 'local',
        triggerAction: 'all',
        typeAhead: true,
        displayField: 'name',
        valueField: 'id'
    }]
});

Das “autoLoad” beim Store sorgt dafür, dass die Daten überhaupt mal geladen werden. Das “mode=’local’” bei der ComboBox hält diese davon ab, während der Eingabe Requests an den Server zu senden. Dieses Beispiel eignet sich somit für überschaubare Datenmengen.

Und noch ein kleines Beispiel. Diesmal die häufige Anforderung ein Suchfeld in einen Toolbar einzubauen, welches sich per Button oder natürlich per Enter/Return Taste absenden läßt.

tbar: [{
  xtype: 'textfield',
  id:'websearch-query',
  width:300,
  enableKeyEvents: true,
  listeners: {
    "keydown": function(field, event) {
      if(event.getKey() == 13){
        cmp.webSearch(field.getValue());
      }
    }
  }
}, {
  text:'Suchen',
  handler: function(){ cmp.webSearch(Ext.getCmp('websearch-query').getValue()); },
  scope: cmp
}]

“cmp” ist dabei eine zuvor gesetzte Referenz auf ein Objekt mit der Methode “webSearch”, hier muss natürlich individueller Code rein. Fallstrick ist eigentlich nur die Config-Option “enableKeyEvents”. Solange diese nicht gesetzt ist, wird das Textfeld nämlich keinerlei Key Events senden.

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
);