X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..76cb34406ceaf9681a76e13b531d7eafa483ad88:/examples/tree/xml-tree-loader.js diff --git a/examples/tree/xml-tree-loader.js b/examples/tree/xml-tree-loader.js index 47270774..0818951e 100644 --- a/examples/tree/xml-tree-loader.js +++ b/examples/tree/xml-tree-loader.js @@ -1,101 +1,99 @@ -/* - * Ext JS Library 2.2.1 - * Copyright(c) 2006-2009, Ext JS, LLC. - * licensing@extjs.com - * - * http://extjs.com/license - */ - - -// -// Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application: -// -Ext.app.BookLoader = Ext.extend(Ext.ux.XmlTreeLoader, { - processAttributes : function(attr){ - if(attr.first){ // is it an author node? - - // Set the node text that will show in the tree since our raw data does not include a text attribute: - attr.text = attr.first + ' ' + attr.last; - - // Author icon, using the gender flag to choose a specific icon: - attr.iconCls = 'author-' + attr.gender; - - // Override these values for our folder nodes because we are loading all data at once. If we were - // loading each node asynchronously (the default) we would not want to do this: - attr.loaded = true; - //attr.expanded = true; - } - else if(attr.title){ // is it a book node? - - // Set the node text that will show in the tree since our raw data does not include a text attribute: - attr.text = attr.title + ' (' + attr.published + ')'; - - // Book icon: - attr.iconCls = 'book'; - - // Tell the tree this is a leaf node. This could also be passed as an attribute in the original XML, - // but this example demonstrates that you can control this even when you cannot dictate the format of - // the incoming source XML: - attr.leaf = true; - } - } -}); - -Ext.onReady(function(){ - - var detailsText = 'Select a book to see more information...'; - - var tpl = new Ext.Template( - '

{title}

', - '

Published: {published}

', - '

Synopsis: {innerText}

', - '

Purchase from Amazon

' - ); - tpl.compile(); - - new Ext.Panel({ - title: 'Reading List', - renderTo: 'tree', - layout: 'border', - width: 500, - height: 500, - items: [{ - xtype: 'treepanel', - id: 'tree-panel', - region: 'center', - margins: '2 2 0 2', - autoScroll: true, - rootVisible: false, - root: new Ext.tree.AsyncTreeNode(), - - // Our custom TreeLoader: - loader: new Ext.app.BookLoader({ - dataUrl:'xml-tree-data.xml' - }), - - listeners: { - 'render': function(tp){ - tp.getSelectionModel().on('selectionchange', function(tree, node){ - var el = Ext.getCmp('details-panel').body; - if(node.leaf){ - tpl.overwrite(el, node.attributes); - }else{ - el.update(detailsText); - } - }) - } - } - },{ - region: 'south', - title: 'Book Details', - id: 'details-panel', - autoScroll: true, - collapsible: true, - split: true, - margins: '0 2 2 2', - cmargins: '2 2 2 2', - height: 220, - html: detailsText - }] - }); +/*! + * Ext JS Library 3.0.0 + * Copyright(c) 2006-2009 Ext JS, LLC + * licensing@extjs.com + * http://www.extjs.com/license + */ + +// +// Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application: +// +Ext.app.BookLoader = Ext.extend(Ext.ux.tree.XmlTreeLoader, { + processAttributes : function(attr){ + if(attr.first){ // is it an author node? + + // Set the node text that will show in the tree since our raw data does not include a text attribute: + attr.text = attr.first + ' ' + attr.last; + + // Author icon, using the gender flag to choose a specific icon: + attr.iconCls = 'author-' + attr.gender; + + // Override these values for our folder nodes because we are loading all data at once. If we were + // loading each node asynchronously (the default) we would not want to do this: + attr.loaded = true; + attr.expanded = true; + } + else if(attr.title){ // is it a book node? + + // Set the node text that will show in the tree since our raw data does not include a text attribute: + attr.text = attr.title + ' (' + attr.published + ')'; + + // Book icon: + attr.iconCls = 'book'; + + // Tell the tree this is a leaf node. This could also be passed as an attribute in the original XML, + // but this example demonstrates that you can control this even when you cannot dictate the format of + // the incoming source XML: + attr.leaf = true; + } + } +}); + +Ext.onReady(function(){ + + var detailsText = 'Select a book to see more information...'; + + var tpl = new Ext.Template( + '

{title}

', + '

Published: {published}

', + '

Synopsis: {innerText}

', + '

Purchase from Amazon

' + ); + tpl.compile(); + + new Ext.Panel({ + title: 'Reading List', + renderTo: 'tree', + layout: 'border', + width: 500, + height: 500, + items: [{ + xtype: 'treepanel', + id: 'tree-panel', + region: 'center', + margins: '2 2 0 2', + autoScroll: true, + rootVisible: false, + root: new Ext.tree.AsyncTreeNode(), + + // Our custom TreeLoader: + loader: new Ext.app.BookLoader({ + dataUrl:'xml-tree-data.xml' + }), + + listeners: { + 'render': function(tp){ + tp.getSelectionModel().on('selectionchange', function(tree, node){ + var el = Ext.getCmp('details-panel').body; + if(node && node.leaf){ + tpl.overwrite(el, node.attributes); + }else{ + el.update(detailsText); + } + }) + } + } + },{ + region: 'south', + title: 'Book Details', + id: 'details-panel', + autoScroll: true, + collapsible: true, + split: true, + margins: '0 2 2 2', + cmargins: '2 2 2 2', + height: 220, + html: detailsText + }] + }); }); \ No newline at end of file