Odd behavior while clicking a custom control

I have some speedbuttons that I created that are actually a AW.UI.ImageText control with the background set to the image that I want for the button. By using CSS to control mouseover actions extc, I 'adjust' the background to produce the proper effects like highlighting and depressed stated. It's a pretty simple control but when in use in the application, when I first click the button (in IE only), I get an exception in HTML.js at line 365. I get "undefined" is null or not an object. When debugging the code in HTML.js, the obj is an object but if I try and do a getId() it returns an empty string. This code is only hit on the first click of that control. It is not hit on subsequest clicks of that control but will get hit if you click another control (I use the speed buttons to produce a navigator control for the grid). Here is the code for the control:

AW.UI.SpeedButton = AW.UI.ImageText.subclass();
AW.UI.SpeedButton.create = function()
{
  var obj = this.prototype;

  obj.setClass("speed", "button");
  obj.setStyle("width", 23);
  obj.setStyle("height", 22);
  obj.setAttribute("enabled", true);
  obj.setType = function(newType)
  {
    if ((typeof this.getAttribute("enabled") == 'undefined') || (this.getAttribute("enabled")== true))
    {
      this.setClass("speedbutton", newType);
    }
    else
      this.setClass("speedbutton", newType + "Dis")
    if (newType == 'logout') this.setStyle("width", 30);
    this.onControlClicked = function(){}; // tried to get rid of the exception
    this.onControlMouseOver = function(){if (this.getAttribute("enabled") != false) this.setClass("speedbutton", newType + "Over")};
    this.onControlMouseOut = function(){if (this.getAttribute("enabled") != false) this.setClass("speedbutton", newType)};
    this.onControlMouseDown = function(){if (this.getAttribute("enabled") != false) this.setClass("speedbutton", newType + "Down")};
    this.onControlMouseUp = function(){if (this.getAttribute("enabled") != false) this.setClass("speedbutton", newType + "Over")};
  }
  obj.setEnabled = function(newValue)
  {
    if (newValue == true)
    {
      if (typeof this.getClass("speedbutton") != 'undefined')
        this.setClass("speedbutton", this.getClass("speedbutton"))
    }
    else
    {
      if (typeof this.getClass("speedbutton") != 'undefined')
        this.setClass("speedbutton", this.getClass("speedbutton") + "Dis")
    }
    this.setAttribute("enabled", newValue);
  }
}

Another interesting side effect that has just come up is that in FF, the onmouseover wirks to display the highlite for the control, but none of the other events work, whereas they used to work fine in FF. Could this be cause by another control interfering with this one? These speed buttons are placed inside an AW.SystemControl with it's tag set to SPAN. And this in turn is inside an AW.System.Control with it's tag set to DIV.

Any thoughts anyone? Am I overlooking an obvious error in my code?

Jim,

Have you found a fix to the problem? I'm also having some problems with getId() in html.js, but my problem seems to come from obj.element().

I'm creating a custom grid, which contains some popups, which appear when the user right-clicks on the header or a row. There's also some code to move the popup off the screen, which relies on the element function. However on calling this, obj seems to have an id of "" although I have tried setting this in different places.

I can try to post a reduced example in the next couple of days. In the meantime, does anyone have any suggestions?

Thanks, Helen.

No fix at this time. It was working for me when I first created it, then later it just stopped working. I suspect it was due to the complexity of my app, but I'm not sure at this time.