Dojo Tree Icons
It has been a while since I have posted. I’ve been off doing non-dojo things, so my brain hasn’t been focused on posting to the blog. Now that I’ve finally gotten my projects up to Dojo 1.3, 1.4 has come out. I’ll be posting based on my 1.3 build until the upgrade and testing gets put into my project schedule.
My post today is about the dijit.Tree and the custom Icon capability. What this does is lets you inspect your data source to determine various attributes of your data, and change the icon based on that data set. Ideally all you have to do is to put a few if-then statements inside a script tag, and return a class name. The class can be defined in the css file.
I’ve found in some cases, that just doesn’t work. In some cases, when you load a page inside another frame or layout container, things might get screwy. Recently I used a set of nested dijit.layout.BorderContainer div tags to divide up my page, and dynamically loaded urls into content panes. Users could click buttons and that content pane would navigate to the different page. Under Firefox, the css just got lost in the shuffle. It’s odd that I have reference to the css from dojo, and the javascript, but not my new application css. The work around is to define your css classes inside your page contained in the Border Container. Here is a sample…
.nihilo .itemA
{
border-top: 0px;
background: url('./icons/itemA.jpg') ;
width: 16px;
height: 16px;
background-position : top left;
background-repeat : repeat-y;
zoom: 1;
}
.nihilo .itemB
{
border-top: 0px;
background: url('./icons/itemB.jpg') ;
width: 16px;
height: 16px;
background-position : top left;
background-repeat : repeat-y;
zoom: 1;
}
Then below where we define our tags, insert the event code.
var pickThisClass= (!item || this.model.mayHaveChildren(item)) ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "other"
if(pickThisClass=="other")
{
if(experimentstore.getValue(item, "model")=="A")
{
return "itemA";
}
if(experimentstore.getValue(item, "model")=="B")
{
return "itemB";
}
}
return "dijitFolderOpened"; //default if nothing is there
That seems to get the dynamic icon up and working just fine!
