Hola amigos del foro, antes que nada queria felicitarles por el curso. Tengo un problema con el combobox, creé un formulario el cual carga los datos desde un archivo php (respuesta con Json desde el servidor), pero a su vez dentro del formulario tengo un combobox que carga desde otro archivo php (respuesta con Json desde el servidor) mediante Ext.data.JsonStore, el problema es que el valor seleccionado que muestra es el mismo para displayField y valueField. en html que obtengo es similar al siguiente:

<select>
<option value="30">30</option>
</select>

y lo que quiero conseguir es:

<select>
<option value="30">Rock</option>
</select>

el codigo js es el siguiente:

Ext.onReady(function(){			
	
	var storeGeneros = new Ext.data.JsonStore({
			url:'includes/kernel.php?mode=JSonGeneros',
			root: 'data',
			totalProperty: 'num',
			autoload: true, 
			fields: [
				{name:'genero', type: 'string'},
				{name:'id', type: 'boolean'}
			]
	});
	
	var FormEditarArtista = new Ext.FormPanel({
		url: 'includes/kernel.php', 
		id: 'FormEditarArtista', 
		labelWidth: 120, 
		border: false, 
		defaults: {width: 400, xtype:'textfield'},
			items: [{
				fieldLabel: 'Artista',
				name: 'artista',
				allowBlank: false
			}
			, new Ext.form.ComboBox({
				fieldLabel:'Genero',
				name:'id_genero',
				forceSelection: true,
				store: storeGeneros, 
				emptyText:'[Seleccionar genero]',
				triggerAction: 'all',
				typeAhead: true, 
				editable: false,
				displayField: 'genero',
				valueField: 'id_genero', 
				allowBlank: false
			}),{
				fieldLabel: 'Url artista',
				name: 'url_artista', 
				allowBlank: false
			},{
				xtype: 'numberfield', 
				fieldLabel: 'Popular',
				name: 'popular', 
				allowBlank: false
			},{
				xtype: 'numberfield', 
				fieldLabel: 'Actualizado',
				name: 'actualizado', 
				allowBlank: false
			}						
			
			,{
				fieldLabel: 'External Imagen',
				name: 'external_imagen'
			}
		]
		
	});
	
	var win = new Ext.Window({  
		title: 'Editando artista',  
		bodyStyle: 'padding:10px;background-color:#fff;',  
		width: 590,
		height: 320,  
		items:[FormEditarArtista],  
		buttons: 
		[{
			text:'Guardar'
		}]
	});  
	
	win.show(); 
	
	FormEditarArtista.getForm().load({ params:{mode: 'JSonArtista', url_artista:url_artista }});
	
});

en pocas palabras, ¿como hago para asignar los valores de displayField y valueField del option seleccionado? porque como verán en el código js tengo asignado el name (name:'id_genero') y con ello consigo que displayField y valueField del option seleccionado sean iguales pero necesito que cada uno tenga un dato diferente. Nota: para que no se confundan, me refiero a un option seleccionado, porque el combo al ser desplegado funciona correctamente. Espero que puedan entender xD, no se explicarlo muy bien. Saludos!