change text of a Text graphics object using gfx library of Dojo

I've created a text object with some code like :

var surface = dojox.gfx.createSurface(dojo.byId("gfx-holder"), 850, 400);
var myText = surface.createText({x:55, y:60, text:"Original"});

Later I'd like to change the text. I've tried a lot of variations on:

myText.text = "Updated";

myText.setText({text: "Updated"});

With no luck , I want to replace the original text with an updated text. Is the only option to delete the old one and draw again?

Solution

You can simply access the node and change it's innerHtml text like

myText.rawNode.innerHTML = "Updated !";

See below snippet :

require([ "dojo/dom", "dijit/registry", "dojo/_base/lang", "dojo/ready", "dojox/gfx", "dijit/ConfirmDialog", "dijit/form/Button"],
  function( dom, registry, lang, ready, gfx) {
    let i = 0;
    ready(function() {
      var surface = gfx.createSurface(dom.byId("gfx-holder"), 200, 100);
      var myText = surface.createText({x:55, y:60, text:"Original"});

      registry.byId("btn").on("click", function(e) {
        i++;
        myText.rawNode.innerHTML = "Updated !"+i;
      });

    })
  }
);

#gfx-holder {
  border: 1px solid black;
}

#gfx-holder {
  fill-opacity: 1 !important;
}
#gfx-holder text {
  fill: black !important;
  fill-opacity : 1 !important;
}

<script type="text/javascript">
  dojoConfig = {
    isDebug: true,
    async: true,
    parseOnLoad: true
  }
</script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />

<body class="claro">
  <div id="gfx-holder"></div>
  <div data-dojo-type="dijit/form/Button" id="btn"> Update text </div>
</body>