用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',