ExtJs 3.1 XmlTreeLoader Example Error

正文

　　 1.　　代碼位置：Ext3.1\examples\tree\xml-tree-loader.js

　　 2.　　注意标紅新增代碼",requestMethod: 'GET'"!!

/*!

 * Ext JS Library 3.1.0

 * Copyright(c) 2006-2009 Ext JS, LLC

 * [email protected]

 * 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?

            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'

                ,requestMethod: 'GET'

            }),

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

            collapsible: true,

            split: true,

            margins: '0 2 2 2',

            cmargins: '2 2 2 2',

            height: 220,

            html: detailsText

        }]

    });

　　 

結束語

　　不要放棄和接受一次失敗的搜尋，不斷的嘗試改變搜尋關鍵字，哪怕是用詞霸翻成英文也得努力去試試，看不懂不要緊，看懂代碼就行，代碼無國界: )

本文轉自over140 51CTO部落格，原文連結：http://blog.51cto.com/over140/586531，如需轉載請自行聯系原作者