ItemFileReadStore and Trees
An ItemFileReadStore can nest JSON hashes within JSON hashes, a technique we saw in Section 3.2, Literals and Hashes, on page 39.2 That structure translates directly to a tree—a nested hash will display as a "folder" node that you can expand.
2. This kind of nesting is called native nesting. ItemFileReadStore also supports reference nesting, allowing more complex relationships such as assigning multiple parents to a child. These relationships cannot be modeled with a Tree anyway, but if you're interested, the Book of Dojo at http://dojotoolkit.org has details.
For example, here is an ItemFileReadStore showing line nesting within an order:
Download tree/datasources/order_combined.json {
{id: 987987, description:"Order 987987", priority: "Next Day Air", line: [
{id: '987987-1', qty:1, sku:11761, description: 'Yodeling Pickle'}, {id: '987987-2', qty:3, sku:11798, description: 'Gummy Tapeworm'}
{ id: 988855, description:"Order 988855", priority: "2nd Day Air" , line: [
{id: '988855-1', qty:4, sku:11753, description: 'Gummy Haggis'}
{id: 988900, description:"Order 988900", priority: "2nd Day Air" , line: [
{id: '988900-1', qty:15, sku:11824, description: 'Worlds Largest Inflatable Heart'}, {id: '988900-2', qty:1, sku:11548, description: 'Deluxe Librarian Action Figure'}
When fed into a Tree with this code...
<div dojoType="dojo.data.ItemFileReadStore" url = "datasources/order_combined.json" jsId="ordJson"></div>
<div dojoType="dijit.tree.ForestStoreModel" rootLabel="Order" store="ordJson" childrenAttrs="line" jsId="ordModel"></div>
<div dojoType= "dijit.Tree" id= "ordTree" model="ordModel"></div>
the data store looks like Figure 13.3, on the next page.
E-Order
Order 987987
Yodelling Piclde Gummy Tapeworm
- Order 988855 Order 988900
Figure 13.3: A hierarchical Tree
Note the childrenAttr= property, a comma-separated list of data store properties. The previous code says all properties named line will hold nested elements. If you don't specify childrenAttr=, Tree assumes the property children specifies which properties hold nested elements. But for data store readability, it's a good idea to explicitly state childrenAttr=. children is simply not descriptive enough—a property name like line tells what the nested items are. It's also a good idea to name them differently at different levels, for example, line at the first level and lineDetail at the second with childrenAttr="line,lineDetail".
ItemFileReadStore has a few caveats when used with Trees. Each item, whether parent or child or grandchild, must have a single identifier attribute. In our example, id is the identifier. Furthermore, identifier values must be unique within the JSON document.
Post a comment