Latest project uses ExtJS for nearly all of its UI. Still a pretty exhaustive toolkit and still seems fairly robust, but I've got to admit that I'm a little wary of abstraction layers. I often create docs in html rather than .doc(x) or what-have-you because I know I can, heck or high water, make html look like I want it to eventually. jQuery initially had me scared, but the ability to reach in with Javascript easily if something borked (and the ease with which you could go javascript parallel to jQuery) won me over, even on a .NET project.

With ExtJS, not so sure. I'm getting the feeling that stuff I do in javascript to get things done might get overwritten by ExtJS with more abandon.

Anyhow, changing a tree node's icon, though not easy or well-documented, was eventually pretty easy once I Firebugged it (another thing I didn't really need with jQuery, though I was a Chrome tools window junkie for a while).

Some decent help here and here (from StackOverflow on both counts).

   1 // (works, so touching the right OM)
   2 Ext.select('.x-tree-icon').each(function(el){
   3     console.log(el.getWidth());
   4 }); 
   5 
   6 
   7 //Changles icon.  QED
   8 Ext.select('.x-tree-icon-leaf').each(function(el){
   9   el.setStyle('background-image','url("http://en.wikipedia.org/favicon.ico")'));
  10 }); 
  11 
  12 
  13 // shorthand also works, but seems to be undocumented:
  14 // http://docs.sencha.com/ext-js/3-4/#!/api/Ext.CompositeElement
  15 // I don't see it inheriting from something that'd add that.
  16 Ext.select('.x-tree-icon-leaf')
  17         .setStyle('background-image','url("http://www.apple.com/favicon.ico")');

Labels: , ,