Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / xml-tree-loader.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js">
9 //
10 // Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:
11 //
12 Ext.app.BookLoader = Ext.extend(Ext.ux.tree.XmlTreeLoader, {
13     processAttributes : function(attr){
14         if(attr.first){ // is it an author node?
15
16             // Set the node text that will show in the tree since our raw data does not include a text attribute:
17             attr.text = attr.first + ' ' + attr.last;
18
19             // Author icon, using the gender flag to choose a specific icon:
20             attr.iconCls = 'author-' + attr.gender;
21
22             // Override these values for our folder nodes because we are loading all data at once.  If we were
23             // loading each node asynchronously (the default) we would not want to do this:
24             attr.loaded = true;
25             attr.expanded = true;
26         }
27         else if(attr.title){ // is it a book node?
28
29             // Set the node text that will show in the tree since our raw data does not include a text attribute:
30             attr.text = attr.title + ' (' + attr.published + ')';
31
32             // Book icon:
33             attr.iconCls = 'book';
34
35             // Tell the tree this is a leaf node.  This could also be passed as an attribute in the original XML,
36             // but this example demonstrates that you can control this even when you cannot dictate the format of
37             // the incoming source XML:
38             attr.leaf = true;
39         }
40     }
41 });
42
43 Ext.onReady(function(){
44
45     var detailsText = '<i>Select a book to see more information...</i>';
46
47         var tpl = new Ext.Template(
48         '<h2 class="title">{title}</h2>',
49         '<p><b>Published</b>: {published}</p>',
50         '<p><b>Synopsis</b>: {innerText}</p>',
51         '<p><a href="{url}" target="_blank">Purchase from Amazon</a></p>'
52         );
53     tpl.compile();
54
55     new Ext.Panel({
56         title: 'Reading List',
57             renderTo: 'tree',
58         layout: 'border',
59             width: 500,
60         height: 500,
61         items: [{
62             xtype: 'treepanel',
63             id: 'tree-panel',
64             region: 'center',
65             margins: '2 2 0 2',
66             autoScroll: true,
67                 rootVisible: false,
68                 root: new Ext.tree.AsyncTreeNode(),
69
70             // Our custom TreeLoader:
71                 loader: new Ext.app.BookLoader({
72                     dataUrl:'xml-tree-data.xml'
73                 }),
74
75                 listeners: {
76                     'render': function(tp){
77                     tp.getSelectionModel().on('selectionchange', function(tree, node){
78                         var el = Ext.getCmp('details-panel').body;
79                             if(node && node.leaf){
80                                 tpl.overwrite(el, node.attributes);
81                             }else{
82                             el.update(detailsText);
83                         }
84                     })
85                     }
86                 }
87         },{
88             region: 'south',
89             title: 'Book Details',
90             id: 'details-panel',
91             autoScroll: true,
92             collapsible: true,
93             split: true,
94             margins: '0 2 2 2',
95             cmargins: '2 2 2 2',
96             height: 220,
97             html: detailsText
98         }]
99     });
100 });</pre>    \r
101 </body>\r
102 </html>