Extjs複習筆記（十九）-- XML作爲tree的數據源
用XML來作爲tree的數據源
所有文件都上傳了
//
// Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:
//
Ext.app.BookLoader = Ext.extend(Ext.ux.tree.XmlTreeLoader, { //XmlTreeLoader是ux/XmlTreeLoader.js裏面定義的類，可以直接拿去用
/*
* processAttributes：Template method intended to be overridden by subclasses that need to provide
* custom attribute processing prior to the creation of each TreeNode. This method
* will be passed a config object containing existing TreeNode attribute name/value
* pairs which can be modified as needed directly (no need to return the object).
*/
processAttributes : function(attr){
if(attr.first){ // is it an author node? //author node指的是根結點的了結點，本例中，第二層結點都是作者author，第三層都是作者寫的書，具體看下面附上的xml文檔內容
// 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; //first和last都是author的屬性
// 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){ //在 render 事件中給 treePanel 加上 selectionchange 事件
tp.getSelectionModel().on('selectionchange', function(tree, node){
var el = Ext.getCmp('details-panel').body; //details-panel其實是一個div，在下面定義, 這邊打算「重寫」這個div裏面的內容
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
}]
});
});
其中涉及到margins 和 cmargins，區別如下：
cmargins : Object //頁邊空白
An object containing margins to apply to the region's collapsed element in the format {left: (left margin), top: (top margin), right: (right margin), bottom: (bottom margin)}
margins : Object //組件間的相對距離
An object containing margins to apply to the region in the format {left: (left margin), top: (top margin), right: (right margin), bottom: (bottom margin)}
附：xml-tree-data.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<authors>
<author first="Fyodor" last="Dostoevsky" gender="m">
<book title="Crime and Punishment" published="1866" url="http://www.amazon.com/Crime-Punishment-Fyodor-Dostoevsky/dp/0679734503/">
Raskolnikov, a destitute and desperate former student, commits a random murder without remorse or regret, imagining himself to be a great man far above moral law. But as he embarks on a dangerous cat-and-mouse game with a suspicious police investigator, his own conscience begins to torment him.
</book>
<book title="The Brothers Karamazov" published="1879" url="http://www.amazon.com/Brothers-Karamazov-Fyodor-Dostoevsky/dp/0374528373/">
Driven by intense, uncontrollable emotions of rage and revenge, the Karamozov brothers become involved in the brutal murder of their despicable father. It is a love-hate struggle with profound psychological and spiritual implications.
</book>
</author>
<author first="Stephen" last="King" gender="m">
<book title="The Shining" published="1977" url="http://www.amazon.com/Shining-Stephen-King/dp/0743424425/">
An alcoholic man, his wife, and his psychic son go to a large haunted hotel for the winter, where the child is threatened by supernatural and family dangers.
</book>
<book title="Cujo" published="1981" url="http://www.amazon.com/Cujo-Signet-Stephen-King/dp/0451161351/">
A big, friendly dog chases a rabbit into a hidden underground cave and stirs a sleeping evil crueler than death itself. The little Maine town of Castle Rock is about to be invaded by the most hideous menace ever to savage the flesh and devour the mind.
</book>
<book title="IT" published="1986" url="http://www.amazon.com/Signet-Books-Stephen-King/dp/0451169514/">
They were seven teenagers when they first stumbled upon the horror. Now they were grown-up men and women who had gone out into the big world to gain success and happiness. But none of them could withstand the force that drew them back to Derry, Maine to face the nightmare without an end, and the evil without a name.
</book>
</author>
<author first="J.K." last="Rowling" gender="f">
<book title="Harry Potter and the Sorcerer's Stone" published="1997" url="http://www.amazon.com/Harry-Potter-Sorcerers-Stone-Book/dp/043936213X/">
All Harry Potter knows is a miserable life with the Dursleys, his horrible aunt and uncle, and their abominable son, Dudley. But all that is about to change when a mysterious letter arrives by owl messenger: a letter with an invitation to a wonderful place he never dreamed existed.
</book>
<book title="Harry Potter and the Chamber of Secrets" published="1998" url="http://www.amazon.com/Harry-Potter-Chamber-Secrets-Book/dp/0439064864/">
Someone - or something - starts turning Hogwarts students to stone. Could it be Draco Malfoy, a more poisonous rival than ever? Could it possibly be Hagrid, whose mysterious past is finally told? Or could it be the one everyone at Hogwarts most suspects... Harry Potter himself!
</book>
<book title="Harry Potter and the Prisoner of Azkaban" published="1999" url="http://www.amazon.com/Harry-Potter-Prisoner-Azkaban-Book/dp/043965548X/">
For Twelve long years, the dread fortress of Azkaban held an infamous prisoner named Sirius Black. Now he has escaped, and the Azkaban guards heard Black muttering in his sleep, "He's at Hogwarts..." Harry Potter isn't safe, not even within the walls of his magical school. Because on top of it all, there may well be a traitor in their midst.
</book>
</author>
</authors>