3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
9 // Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:
11 Ext.app.BookLoader = Ext.extend(Ext.ux.tree.XmlTreeLoader, {
12 processAttributes : function(attr){
13 if(attr.first){ // is it an author node?
15 // Set the node text that will show in the tree since our raw data does not include a text attribute:
16 attr.text = attr.first + ' ' + attr.last;
18 // Author icon, using the gender flag to choose a specific icon:
19 attr.iconCls = 'author-' + attr.gender;
21 // Override these values for our folder nodes because we are loading all data at once. If we were
22 // loading each node asynchronously (the default) we would not want to do this:
26 else if(attr.title){ // is it a book node?
28 // Set the node text that will show in the tree since our raw data does not include a text attribute:
29 attr.text = attr.title + ' (' + attr.published + ')';
32 attr.iconCls = 'book';
34 // Tell the tree this is a leaf node. This could also be passed as an attribute in the original XML,
35 // but this example demonstrates that you can control this even when you cannot dictate the format of
36 // the incoming source XML:
42 Ext.onReady(function(){
44 var detailsText = '<i>Select a book to see more information...</i>';
46 var tpl = new Ext.Template(
47 '<h2 class="title">{title}</h2>',
48 '<p><b>Published</b>: {published}</p>',
49 '<p><b>Synopsis</b>: {innerText}</p>',
50 '<p><a href="{url}" target="_blank">Purchase from Amazon</a></p>'
55 title: 'Reading List',
67 root: new Ext.tree.AsyncTreeNode(),
69 // Our custom TreeLoader:
70 loader: new Ext.app.BookLoader({
71 dataUrl:'xml-tree-data.xml'
75 'render': function(tp){
76 tp.getSelectionModel().on('selectionchange', function(tree, node){
77 var el = Ext.getCmp('details-panel').body;
78 if(node && node.leaf){
79 tpl.overwrite(el, node.attributes);
81 el.update(detailsText);
88 title: 'Book Details',