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>