[dojo-contributors] dijit: removing id attributes in favor of widgetid

Tom Trenka ttrenka at gmail.com
Fri Aug 31 12:57:03 EDT 2007

Hi guys,
So in doing a lot of porting work from 0.4 to 0.9 with Dijit, we've run
across a number of problems (many of them not Dijit-related), but there's
one that stands out that seems like a deliberate choice.  Basically, it
seems that Dijit will take something like this:

<div dojoType="dijit.Menu" id="myMenu"></div>

...and in the process of rendering, will change it to this:

<table dojoType="dijit.Menu" widgetid="myMenu"></table>

We haven't had any real issues with node swapping (i.e. the div -> table
here), but not having the original ID available is causing us major
headaches, particularly when we run into a situation where we need to be
able to define styles on very specific elements within a single instance of
a Dijit.  In several places in this application, I've been forced to pull
something like this:

dojo.query("*[widgetid='myMenu']").forEach(function(node){ ...do
something... };

...in order to get access to help style internal structures (this particular
example came from trying a method of creating custom icons on tree nodes
with dijit.Tree, but you get the idea).  In particular, I've run across a
situation where we have a dijit.Menu that needs to stretch to fill the pane
that it's placed in, and then be able to set widths on the individual cells
that are created.  To do this, I had to pull something like the following:

var rows=dijit.byId("myMenu").domNode.tBodies[0].rows;
for(var i=0; i<rows.length; i++){
    rows[i].cells[0].style.width="16px";  // icon cell
    rows[i].cells[1].style.width="90%";  // label cell, stretch to fill
    rows[i].cells[2].style.width="16px"; // arrow cell, regardless if
there's an arrow or not.

This works ok for our situation because we only have one level of items (i.e.
no submenus), but it would have been a lot more intuitive to pull this in
CSS for the overall width and the label:

table#myMenu{ width:100%; }
table#myMenu tbody tr td.dijitMenuLabelItem{ width:90%; }

...but then we have no access to style the width of either the icon cell or
the arrow one (inspecting the HTML shows both only have "dijitReset" as
class names).

My question (after all that) is this:  is there a reason why Dijit shifts a
user-defined id to widgetid?  To give an example (along the lines above) of
why this can be a bad thing, imagine what I'd have to do to make the above
CSS work correctly:

table[widgetid='myMenu]{ width:100%; }
table[widgetid='myMenu] tbody tr td.dijitMenuLabelItem{ width:90%; }

...which will (of course) not work in Internet Explorer at all.

Thoughts?  Answers?

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mail.dojotoolkit.org/pipermail/dojo-contributors/attachments/20070831/d4434735/attachment.htm 

More information about the dojo-contributors mailing list