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'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><div><br class="webkit-block-placeholder"></div><div><div dojoType="dijit.Menu" id="myMenu"></div></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><table dojoType="dijit.Menu" widgetid="myMenu"></table></div><div><br> </div><div>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:
</div><div><br class="webkit-block-placeholder"></div><div>dojo.query("*[widgetid='myMenu']").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). 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:
</div><div><br class="webkit-block-placeholder"></div><div>dijit.byId("myMenu").domNode.style.width="100%";</div><div>var rows=dijit.byId("myMenu").domNode.tBodies[0].rows;</div><div>for(var i=0; i<
rows.length; i++){</div><div> rows[i].cells[0].style.width="16px"; // icon cell</div><div> rows[i].cells[1].style.width="90%"; // label cell, stretch to fill</div><div> rows[i].cells[2].style.width="16px"; // arrow cell, regardless if there'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 "dijitReset" as class names).
</div><div><br class="webkit-block-placeholder"></div><div>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:
</div><div><br class="webkit-block-placeholder"></div><div>table[widgetid='myMenu]{ width:100%; }</div><div>table[widgetid='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? Answers?</div><div><br class="webkit-block-placeholder"></div><div>Thanks--</div>
<div>trt</div>