Hi guys,<div><br class="webkit-block-placeholder"></div><div>So in doing a lot of porting work from 0.4 to 0.9 with Dijit, we&#39;ve run across a number of problems (many of them not Dijit-related), but there&#39;s one that stands out that seems like a deliberate choice. &nbsp;Basically, it seems that Dijit will take something like this:
</div><div><br class="webkit-block-placeholder"></div><div>&lt;div dojoType=&quot;dijit.Menu&quot; id=&quot;myMenu&quot;&gt;&lt;/div&gt;</div><div><br class="webkit-block-placeholder"></div><div>...and in the process of rendering, will change it to this:
</div><div><br class="webkit-block-placeholder"></div><div>&lt;table dojoType=&quot;dijit.Menu&quot; widgetid=&quot;myMenu&quot;&gt;&lt;/table&gt;</div><div><br>&nbsp;</div><div>We haven&#39;t had any real issues with node swapping (
i.e. the div -&gt; 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. &nbsp;In several places in this application, I&#39;ve been forced to pull something like this:
</div><div><br class="webkit-block-placeholder"></div><div>dojo.query(&quot;*[widgetid=&#39;myMenu&#39;]&quot;).forEach(function(node){ ...do something... };</div><div><br class="webkit-block-placeholder"></div><div>...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). &nbsp;In particular, I&#39;ve run across a situation where we have a dijit.Menu that needs to stretch to fill the pane that it&#39;s placed in, and then be able to set widths on the individual cells that are created. &nbsp;To do this, I had to pull something like the following:
</div><div><br class="webkit-block-placeholder"></div><div>dijit.byId(&quot;myMenu&quot;).domNode.style.width=&quot;100%&quot;;</div><div>var rows=dijit.byId(&quot;myMenu&quot;).domNode.tBodies[0].rows;</div><div>for(var i=0; i&lt;
rows.length; i++){</div><div>&nbsp;&nbsp; &nbsp;rows[i].cells[0].style.width=&quot;16px&quot;; &nbsp;// icon cell</div><div>&nbsp;&nbsp; &nbsp;rows[i].cells[1].style.width=&quot;90%&quot;; &nbsp;// label cell, stretch to fill</div><div>&nbsp;&nbsp; &nbsp;rows[i].cells[2].style.width=&quot;16px&quot;; // arrow cell, regardless if there&#39;s an arrow or not.
</div><div>}</div><div><br class="webkit-block-placeholder"></div><div>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:
</div><div><br class="webkit-block-placeholder"></div><div>table#myMenu{ width:100%; }</div><div>table#myMenu tbody tr td.dijitMenuLabelItem{ width:90%; }</div><div><br class="webkit-block-placeholder"></div><div>...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 &quot;dijitReset&quot; as class names).
</div><div><br class="webkit-block-placeholder"></div><div>My question (after all that) is this: &nbsp;is there a reason why Dijit shifts a user-defined id to widgetid? &nbsp;To give an example (along the lines above) of why this can be a bad thing, imagine what I&#39;d have to do to make the above CSS work correctly:
</div><div><br class="webkit-block-placeholder"></div><div>table[widgetid=&#39;myMenu]{ width:100%; }</div><div>table[widgetid=&#39;myMenu] tbody tr td.dijitMenuLabelItem{ width:90%; }</div><div><br class="webkit-block-placeholder">
</div><div>...which will (of course) not work in Internet Explorer at all.</div><div><br class="webkit-block-placeholder"></div><div>Thoughts? &nbsp;Answers?</div><div><br class="webkit-block-placeholder"></div><div>Thanks--</div>
<div>trt</div>