examples/tree/xml-tree-loader.js

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