{lang: 'hu'}

Ma a következő problémába futottam bele: egy partnereket listázó combobox lenyiló listájában a partnerek nevei mellé megkellett jelenítenem egy ikont, amire kattintva a partner adatai szerkeszthetővé válnak.
Egyedi listanézet
Azonban az ikont tartalmazó div elemre definiált event handler sehogy sem akart lefutni. Szerencsére sikerült megoldást találni a problémára, ami a következő:

Az Ext.form.field.ComboBox-nak van egy olyan propertyje, hogy listConfig, amivel a lenyíló listát lehet konfigurálni. Itt kell definiálnunk egy event-et (itemclick):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
listConfig: { 
	cls: 'partner-combo', 
	getInnerTpl: function() { 
		return '<strong>{partnerName}</strong>' +
			   '...' + 
			   '<div class="edit-icon"></div>';
	}, 
	listeners: { 
		itemclick: function(view, record, item, index, e) { 
			var target = e.getTarget(), 
				icon = Ext.get(target), 
				combo = view.pickerField, 
				editorWindow; 
 
			/* 
			 * Csak akkor jelenítjük meg a szerkesztő ablakot, ha
			 * a click target az ikon volt 
			 */ 
			if(target.className.indexOf('edit-icon') !== -1) { 
				/*
				 * e.stopPropagation() és e.preventDefault() helyett
				 */ 
				e.stopEvent(); 
 
				editorWindow = Ext.create('Ext.window.Window', { 
					'...' : '...'
				}); 
			} 
		} 
	} 
}

Leave a Reply

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.