Foro

Cargar imagen en un panel

0
Hola, tengo un pequeño problema, es que estoy dando mis primeros pasos en ExtJS y hay cosas que no tengo ni idea. He aquí el problema, necesito cargar una imagen en un panel, y poder moverme en ella y hacerle zoom, pero no se ni como cargarla, alguien puede ayudarme, decirme si existe algun componente que me permita hacer esto?? Gracias de antemano
0
Puedes usar un template para posicionar la imágen en el body de un panel o coponente, por ejemplo:

{
   xtype : 'component',
   tpl   : '<img src="{src}" />',
   data  : {
      src  : 'src/imagen.png'
   }
}

 

De esa manera puedes modificar la variable SRC muy sencillo y automáticamente el template cambiará la URL de la imágen, para el zoom puedes cambiar el tamaño de la imagen cuando presionen el botó + o -.

Saludos

Ana María Quesada: y existe alguna manera de modiificar ese src din'amicamente? 28/04/2015
Crysfel Villa: Si claro! Una vez que tomes la instancia de ese componente: instancia.setData({src:'actualiza/la/ruta.png'}) 28/04/2015
Ana María Quesada: Hola otra vez, intenté probar lo que me comentabas de mostrar la imagen en un panel, pero no funciona, no me muestra nada, el código que utilizo es este... 28/04/2015
0
Crysfel, hola otra vez, intenté probar lo que me comentabas de mostrar la imagen en un panel, pero no funciona, no me muestra nada, el código que utilizo es este...

this.panelImg = new Ext.Panel({
            id: 'panelImg',
            region: 'center',
            tpl: '<img src="{src}" />',
            data: {
                src: 'localhost/files/image.png'
            }
        });

no se si es que he hecho algo mal, no obstante cuando utilizo otra variante que encontré si carga la imagen, pero no se cómo podría cambiar dinámicamente el src, la variante sería...

this.panelImg = new Ext.Panel({
            id: 'panelImg',
            region: 'center',
        });
       
        this.image = new Ext.BoxComponent({autoEl: {tag: 'img', src: 'localhost/files/image.png'}});

this.panelImg.add(this.image);

Ayuda por favor!
0
Hola Ana, te recomiendo que utilices Ext.XTemplate de la siguiente manera:
var img = new Ext.XTemplate('<img src="{src}">');
  
  var win = new Ext.Window({
    title : 'Ejemplo',
    width : 300,
    height: 200,
    tbar  :[{text:'Load',handler:function(){
      var images = [
        {src:'https://s3.amazonaws.com/quizzpot/images/220-06-movimiento.png'},
        {src:'https://s3.amazonaws.com/quizzpot/images/202-materialdesign_introduction.png'},
        {src:'https://s3.amazonaws.com/quizzpot/images/184-grunt.png'}
      ];
      var newImage = images[Math.floor(Math.random()*3)];

      img.overwrite(win.body,newImage);
    }}]
  });
  
  win.show()

 El código anterior crea una instancia de la clase Ext.XTemplate, luego crea una ventana, en el handler del botón estoy asignando aleatoriamente una imágen cada vez que se da click sobre el botón. Utilizo el método overwrite para asignar la nueva imagen al body de la ventana.

Aquí te dejo un ejemplo funcionando: http://jsbin.com/yiwovozuga/1/edit?js,output

Saludos

Ana María Quesada: y esto cómo lo podría aplicar a un panel en vez de a una ventana?? porque el panel no tiene la propiedad body, así que no tengo ni idea 03/05/2015
Ana María Quesada: Bueno al fin logré mi objetivo, cargo la imagen en un dataview con templates. Por otra parte necesito saber si alguien conoce de algun procedimiento para poder obtener las coordenadas de un píxel cuando el usuario de un clic en la imagen. Gracias de antemano. 03/05/2015
0
Hola, me he topado con un problema semejante y aunque me he leído todas las propiedades del objeto File en la API no encuentro cómo obtener la URL de la imagen que deseo cargar, de momento he logrado algo, pero no es lo ideal:

//Code here
xtype: 'container',
layout: 'column',
items : [{
columnWidth:.23,
height: 80,
border: true,
items: [{
xtype: 'image',
id: 'fotograma',
height: 80,
src: ''
}]
},{
columnWidth:.77,
border: false,
height: 80,
padding: '0 0 0 5px',
items: [{
xtype: 'filefield',
name: 'photo',
msgTarget: 'side',
buttonOnly: true,
anchor: '100%',
buttonText: 'Select Photo...',
listeners: {
'change' : function(e,value){
Ext.getCmp('fotograma').setSrc('fotogramas/'+e.getValue());
}
}
}]
}]

Con esto logro que la imagen que está en la carpeta fotogramas se cargue es el componente Image, pero si intento cargar una imagen que no esté en esa carpeta no lo logro.
Por favor alguna ayuda. (solo necesito saber cómo obtener la dirección local de la imagen que carga el componente File)
Hasta ahora tengo un algoritmo en mente y es que tengo que hacer alguna consulta ajax luego de cargar la imagen con el componente File y usando PHP mover esa imagen a la carpeta fotogramas de mi directorio raíz y solo entonces cargarla en el componente Image.
Saludos y gracias.

¿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.