Changing constraints on the fly

Question

Hi,

I have a dijit.form.NumberTextBox input field that starts out with these parms:

 new dijit.form.NumberTextBox({
    id: din1,
    style: "width:60px",
    constraints: {
        places: 0,
        pattern: '######'
      }
    },
    din1);

Everything works great..My question is I would like to change 'places' and 'pattern' parms on the fly. So I wrote this to change 'places' and 'patterns' parms:

var myFldObj = dijit.byId(din1);
if (myFldObj) {
  var myConstObj = myFldObj.attr('constraints');
  if (myConstObj) {
     myConstObj.places = 2;
     myConstObj.pattern = '#####.0';
  }
}

So, after I show the form again, I'd expect the entry field to allow 2 decimal places but the form still acts like places=0 and pattern='######'. When I check the values of 'places' and 'pattern' I get what I'd expect (2 and #####.0). My question:

Can you change these values on the fly??

OR

Do you have to destroy the original dijit object and recreate with new parms??

Thx!!

Answer 1

I use Dojo 1.3 and I can see that dijit.form.NumberTextBox has no pattern and places properties, but has editOptions property. So I would try to change the constraints like this:

myConstObj.editOption.places = 2;

Answer 2

So, here is what worked for me:

First, I think this is a bug because an input field that starts out like

new dijit.form.NumberTextBox({
    id: "fieldID",
    style: "width:60px",
    constraints: {
        places: 0
      }
    },
    "fieldID");

that is then changed on the fly with code like:

NOTE: ntbArry - Array of dijit.form.NumberTextBox objs tied to a html input tag id.

for (var x=0;x < ntbArry.length;x++) { 
  var handle = ntbArry[x];
  if (handle) {
    handle.attr('constraints').places = 2;
    handle.attr('constraints').pattern = '#####.0#';      
  } 
}

Does not exhibit the same behavior as a field created this way (no constraints mods on the fly):

new dijit.form.NumberTextBox({
  id: "fieldID",
  style: "width: 60px",
  constraints: {
    places: 2,
    pattern: '#####.0#'
  }
},
"fieldID");

It's close in behavior but every time you type a decimal point, the error message pops up stating invalid entry. This message doesn't pop up when typing the decimal point on a field that was originally created with the constraints places=2 and pattern '#####.0#'.

So, to get original behavior I wanted:

fieldIDEvents is an array of dojo events tied to NumberTextBox fields. Before continuing disconnect dojo events

for (var x=0;x < fieldIDEvents.length;x++) {
  var handle = fieldIDEvents[x];
  if (handle) {    
    dojo.disconnect(handle);
  }
}

then destroy the NumberTextBox dojo objects

for (var x=0;x < ntbArry.length;x++) {
  var handle = ntbArry[x];
  if (handle) {
    handle.destroy();
    ntbArry[x] = null;
  }
}

Next, place the input tag back into the html because it gets destroyed:

NOTE: tdtag and an id on a html td tag which should contain the input tag.

var fld1 = this.document.getElementById("tdtag");

if (fld1) {
  //alert("\""+fld1.innerHTML+"\"");
  fld1.innerHTML = "<input id=\"fieldID\">";
} 

Now, create the NumberTextBox object again:

ntbArry[0] = new dijit.form.NumberTextBox({
  id: "fieldID",
  style: "width: 60px",
  constraints: {
    places: 2,
    pattern: '#####.0#'
  }
},
"fieldID");

It's a few extra steps but, at least I know this is what works for me..If I'm missing something basic, let me know, it's easy to miss the small details with this stuff.