Foro

problema con combo con iconos

hola, en mi proyecto tengo una grilla que muestra un icono de una ampolleta (foco) para mostrar un valor booleano. lo tomo de la bd y me lo muestra perfecto, como es un grid editable le agregue un combo de editor, que funciona bien excepto porque cuando despliego el combo detras me muestra el codigo que genera la imagen y no se como evitar eso. adjunto el codigo y un par de imagenes:

myStoreCombo = new Ext.data.ArrayStore({
			
     data: [['<img src="images/lightbulb_off.png">','0'],['<img src="images/lightbulb.png">','1']],
     fields:['imagen','valor']
		
});
var combo = new Ext.form.ComboBox({
		
     typeAhead: false,
     triggerAction: 'all',
     lazyRender:true,
     mode:'local',
     store:myStoreCombo,
     displayField:'imagen',
     valueField: 'valor',
     listClass: 'x-combo-list-small',
     alowBlank:false
});

en la imagen avisos.jpg es como carga desde la bd, y luego en avisos2.jpg se ve el texto de fondo, me gustaria que no saliera nada. cualqueir luz será agradecida

tokkaido
15/09/2009

4 Respuestas

Mejores votos Por fecha Solución

pusiste las imagenes en un directorio de tu proyecto, con el mismo nombre que estan guardadas en tu BD?

Invitado
15/09/2009

las imagenes no estan guardadas en la BD, las carga localmente de este array:

myStoreCombo = new Ext.data.ArrayStore({
         
     data: [['<img src="images/lightbulb_off.png">','0'],['<img src="images/lightbulb.png">','1']],
     fields:['imagen','valor']
      
});

tokkaido
15/09/2009

necesitas utilizar la propiedad "renderer" del column model, checa este tut que escribie hace tiempo: http://www.quizzpot.com/2009/08/editar- ... -combobox/ en resumen, no pongas la imagen en el store, solo pon un true/false como value, luego en la función renderer crea la imagen correspondiente. saludos PS: si necesitas un ejemplo me avisas.

Crysfel Villa
15/09/2009

me di cuenta que no necesitaba un combo puesto que solo son dos estados: luz prendida o luz apagada, he tratado de implementar algo que lei en el foro de extjes, creo que fue una respuesta de el_crespo, pero no puedo hacer que la imagen cambie, mi codigo es el que sigue:

listeners:{
	celldblclick:function(grid,rowindex,colindex, e){
		if (colindex==7){
			var fila = grid.getStore().getAt(rowindex, colindex);
			var activado = fila.data.deinicioafin;
			console.log(fila.data.deinicioafin);
			fila.data.deinicioafin.EDIT;
		
			if (activado==1){
				fila.data.deinicioafin = 0;
			}else{
				fila.data.deinicioafin = 1;
			}
			
			console.log(fila.data.deinicioafin);
		}
	}
},

este es el codigo de mi listener, tengo un renderer que me muestra las ampolletitas pero no se como llamarlo desde el listener ni que me muestre la celda como 'sucia' despues de cambiar el codigo. mi renderer:

function iconInicioFin(val){
     if (val==0){
           return '<img src="images/lightbulb_off.png">';
     }else{
	return '<img src="images/lightbulb.png">';
     }
};

originalmente lo habia hecho de otra forma que me cambia solo el icono si es 0 y me daba un error de [color=#FF0000]invalid assignment left-hand side[/color] de la forma en que me funcionaba a medias era:

listeners:{
	celldblclick:function(grid,rowindex,colindex, e){
		var fila=grid.getStore().getAt(rowindex, colindex);
		var activado = fila.get('deinicioafin');
		if (activado==1){
			fila.set('deinicioafin') = 0;
		}else{
			fila.set('deinicioafin') = 1;
					
		}
	}
			
},

este ultimo codigo me funciona solo si el estado original es de 'apagado', o sea cambia la ampolletita al otro estado pero no me vuelve a cambiar al estado 'apagado' una vez 'prendida', ahoa bien yo asumi que si 'get' me servia para obtener un valor 'set' me serviria para asignarlo pero la verdad es que no encontré en la API como implementar lo que queria

tokkaido
17/09/2009

¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook

Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.