Many-To-Many-Beziehung mit Medien-Selektor?

Ich habe eine Many-To-Many-Beziehung mit der Media-Tabelle gemacht (so wie in den Docs beschrieben), zusätzlich habe ich die Wartung der Media-Einträge (bei mir Referenzen genannt) in einen eigenen Tab zur besseren Übersichtlichkeit ausgelagert.

Bei der Auswahl erhalte ich jetzt jedoch immer nur ein Dropdown mit den Medien-Namen, ich hätte jedoch lieber eine Auswahl ähnlich dem Media Manager wo ich anhand der Thumbnails aussuchen kann.

Hier ist der ExtJS-Code aus der zugehörigen view/detail/reference.js:

Ext.define('Shopware.apps.EtsArticlebundle.view.detail.Reference', {
	extend: 'Shopware.grid.Association',
	
	alias: 'widget.articlebundle-view-detail-reference',
	height: 300,
	title: '{s name="references"}Referenzen{/s}',
	
	configure: function() {
		return {
			controller: 'EtsArticlebundle',
			columns: {
				name: {},
				path: {}
			}
		};
	},
	
	createColumns: function() {
		var me = this;
		columns = me.callParent(arguments);
		
		var column = {
				xtype: 'gridcolumn',
				header: 'Bild',
				renderer: me.columnRenderer,
				sortable: false,
				dataIndex: 'imageSrc',
				width: 200
		};
		
		columns = Ext.Array.insert(
				columns,
				0,
				[ column ]
		);
		
		return columns;
	},
	
	columnRenderer: function(value, metaData, record) {
		var date = record.get('path');
		var ret = '<img src="';
		ret += '{media path="' + date + '"}';
		ret += '" alt="" style="max-width: 100px; height: auto;" />';
	
		return ret;
	}
});

Damit man zumindest irgendeinen Anhaltspunkt hat was man ausgewählt hat gebe ich in einer Extra-Spalte noch das Bild selbst aus (da würde ich übrigens auch lieber das Thumbnail darstellen als das Bild in voller Auflösung laden zu müssen, habe ich ebenfalls noch nicht geschafft)