X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/source/xml-tree-loader.html?ds=sidebyside diff --git a/docs/source/xml-tree-loader.html b/docs/source/xml-tree-loader.html new file mode 100644 index 00000000..b036ed11 --- /dev/null +++ b/docs/source/xml-tree-loader.html @@ -0,0 +1,102 @@ + +
++// +// 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( + '+ + \ No newline at end of file{title}
', + 'Published: {published}
', + 'Synopsis: {innerText}
', + '' + ); + 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 + }] + }); +});