examples/tree/xml-tree-loader.js

   1 /*!
   2  * Ext JS Library 3.2.1
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7
   8 //
   9 // Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:
  10 //
  11 Ext.app.BookLoader = Ext.extend(Ext.ux.tree.XmlTreeLoader, {
  12     processAttributes : function(attr){
  13         if(attr.first){ // is it an author node?
  14
  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;
  17
  18             // Author icon, using the gender flag to choose a specific icon:
  19             attr.iconCls = 'author-' + attr.gender;
  20
  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:
  23             attr.loaded = true;
  24             attr.expanded = true;
  25         }
  26         else if(attr.title){ // is it a book node?
  27
  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 + ')';
  30
  31             // Book icon:
  32             attr.iconCls = 'book';
  33
  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:
  37             attr.leaf = true;
  38         }
  39     }
  40 });
  41
  42 Ext.onReady(function(){
  43
  44     var detailsText = '<i>Select a book to see more information...</i>';
  45
  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>'
  51         );
  52     tpl.compile();
  53
  54     new Ext.Panel({
  55         title: 'Reading List',
  56             renderTo: 'tree',
  57         layout: 'border',
  58             width: 500,
  59         height: 500,
  60         items: [{
  61             xtype: 'treepanel',
  62             id: 'tree-panel',
  63             region: 'center',
  64             margins: '2 2 0 2',
  65             autoScroll: true,
  66                 rootVisible: false,
  67                 root: new Ext.tree.AsyncTreeNode(),
  68
  69             // Our custom TreeLoader:
  70                 loader: new Ext.app.BookLoader({
  71                     dataUrl:'xml-tree-data.xml'
  72                 }),
  73
  74                 listeners: {
  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);
  80                             }else{
  81                             el.update(detailsText);
  82                         }
  83                     })
  84                     }
  85                 }
  86         },{
  87             region: 'south',
  88             title: 'Book Details',
  89             id: 'details-panel',
  90             autoScroll: true,
  91             collapsible: true,
  92             split: true,
  93             margins: '0 2 2 2',
  94             cmargins: '2 2 2 2',
  95             height: 220,
  96             html: detailsText
  97         }]
  98     });
  99 });