image - dijit.form.button con img src en programática

dojo

Question

¿Hay alguna manera de agregar la etiqueta img src en programmatic para un dijit.form.button?

En declarativo, podemos hacer algo como esto:

<div dojoType="dijit.form.Button"><img src="images/img.png"/></div>

En este caso, el botón dijit es completamente reemplazado por la imagen.

Si intento algo como esto, la imagen no reemplaza el botón sino que aparece en:

var button = new dijit.form.Button({
        showLabel : false,
        label : "Validate",
        iconClass : "alphaIcon validateIcon",   
    })

Su ayuda sería muy apreciada.

Gracias por adelantado

Answer 1

Creo que su enfoque debería ser hacer exactamente lo que hizo Y crear CSS personalizado para modificar la apariencia.

myIconButton.dijitButton .dijitButtonNode {
  border: 0;
  background-image: none;
  background-color: transparent;
  box-shadow: none;
}

var button = ... // same as above
dojo.addClass(button.domNode, ''myIconButton'');

Para responder directamente a su pregunta, puede crear su propio widget de botón con una plantilla personalizada que solo tenga el origen de la imagen.

dojo.declare("MyIconButton", [Button], {
  templateString: ''<div><img src="${imageSrc}"></img></div>''
});

NOTA: No probé este enfoque y podría haber otras modificaciones que necesitaría en MyIconButton porque la clase Button básica esperaría otros nodos en la plantilla.

Answer 2

Lo siguiente hará lo que quieras

this.button1.attr(''label'',''<img src="'' + this.constants.packagePrefix + ''/images/button1.gif"/>'');

Lo encontré aquí: http://mail.dojotoolkit.org/pipermail/dojo-interest/2009-August/038353.html

Answer 3

He estado usando una clase con imagen de fondo para botones. Esto realmente hizo difícil establecer dinámicamente la imagen. Entonces, tuve éxito usando esto:

domStyle.set(myButton.iconNode, ''background-image'', ''url(images/icon.png)'');

El truco fue usar IconNode, en lugar de domNode o containerNode.