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