FindComponent

I'm taking a few posts off from my Domain in the Box series mostly because I'm taking the time to move my data from a bunch of static methods in code to a nice neat like Sql Data File (.sdf) in VS 2008 Beta 2 (did I mention that I'm sold, really sold on Beta 2). That's going to be a tedious process that will take a few days, so when I'm done I'm going to pick that series up once I'm a little farther along with the move. In the interim I'm going to address a few short topics around poking the AjaxToolKit with stick.

Today's topic? The Sys.Application.findComponent function. Components. I've used it before here, but I've not really covered why you might use it. Basically I've used it for the task of adding event handlers to an extender. Like in the linked post above, I will search for an extender, and then wire up an event hander and that's about it. And for this post I'm going to provide another simple example of that, but there's a few other reasons you might want to poke around a component. One such case is the "_layout" function of the ModalPopupExtender. In the 10618 release I encountered an annoying side effect with the changing the innerHTML of a ModalPopupExtender. Any time that I swapped the content dynamically, it would reposition the Modal. This is on one hand a desired behavior, but I would also be nice to turn it off, so here's a little script I used to solve that issue.

<script type="text/javascript">

   var extenderID = null;
   var extender = null;
   var _doLayout = true;
   function hideSet(sender, args){
      var cncl = confirm('Are you sure you want to close?');
      if (!cncl){
        _doLayout = true;
         args.set_cancel(true);
      }
   }
   function reg_init(exID)
   {
      if (!extender){
         extenderID = exID;
         Sys.Application.add_load(init);
      }
   }
   function init(){
      if (!extender){
      extender = Sys.Application.findComponent(extenderID);
      extender._lyt = extender._layout;
      extender._layout = function layoutExtension(){
         alert('a');
        if (_doLayout && this._lyt)
        {
           alert('g');

            _doLayout = false;
            this._lyt();
        }
      };
      extender.add_hiding(hideSet);
   }
}
</script>
Called in code behind:

ScriptManager.RegisterStartupScript(this, GetType(), "main", "reg_init('" + FindThisModalExtender.ClientID + "');", true);

Basically I'm just pushing the original _layout function into a new bucket, and adding a check to see if I really want to perform a layout. It's a pretty simple and sometimes useful trick, the big downside is that I'm violating the implied convention that all JS variables, and functions that start with "_" are private, and subject to change. In reality what I should do is open up the toolkit and give myself a public hook, except that in the end, my implementation will be just as fragile. When I update to a new version of the toolkit, I either would have to possibly redo my hack or possible redo my customization of the ModalPopupExtender depending on what's been fixed or changed in the toolkit. What's the this in this.

 

Print | posted on Tuesday, October 30, 2007 11:19 PM
Comments have been closed on this topic.