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>