ExtJs 3.1 XmlTreeLoader Example Error

前言
关键字:ExtJs 3.1 XmlTreeLoader Example Error,XmlTreeLoader 错误,TreePanel Error

  ExtJs 3.1的XmlTreeLoader例子折腾了我近一个下午加晚上,官方的例子没有问题,可以加载xml的数据,本地IIS死活不行,也不报错,直接查看官方的代码也是一模一样的,今早意外给让我搜到了,不是在官方,而是在貌似一个韩国的博客里面找到的,致敬一下,本文且做其简单中文"译"本。

 

原文

  http://javarush.com/entry/ExtJS-XmlTreeLoader-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
 * 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'
                ,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',
            autoScroll: true,
            collapsible: true,
            split: true,
            margins: '0 2 2 2',
            cmargins: '2 2 2 2',
            height: 220,
            html: detailsText
        }]
    });
});

   

结束语

  不要放弃和接受一次失败的搜索,不断的尝试改变搜索关键字,哪怕是用词霸翻成英文也得努力去试试,看不懂不要紧,看懂代码就行,代码无国界: )

转载:http://www.cnblogs.com/over140/archive/2010/02/08/1665698.html

时间: 2024-12-31 04:40:38

ExtJs 3.1 XmlTreeLoader Example Error的相关文章

批量导入-extjs,上传excel文件后报SyntaxError: syntax error错误,纠结一下午了,请大神

问题描述 extjs,上传excel文件后报SyntaxError: syntax error错误,纠结一下午了,请大神 基本代码如下: form.getForm().submit({ url : importWhiteUserUrl, method : 'POST', success : function(form, action) { Ext.MessageBox.alert('信息', action.result.showmessage); _this.loadData(); win1.c

extjs中js资源缓存策略

http的缓存协商 浏览器对静态文件的缓存主要是通过cache-control来控制的,cache-control可以设置no-cache,max-age以及must-revalidate等来设置缓存策略. 如果max-age> 0则会在max-age的时间内不访问服务器,用本地缓存的静态文件代替. 如果max-age<=0则会每次都询问服务器,资源文件是否有修改,有则200,无则304.这相当于f5操作. no-cache表示不理会缓存协商,全部重新加载.这相当于是ctrl+f5操作. mu

ExtJs 备忘录(3)—— Form表单(三) [ 数据验证 ]

前言 本章主要讲ExtJS表单验证方面,正好趁着周末多写两篇,一边梳理之前用过的代码,一边就地取材补充相关方面的资料,算是温习+补习吧 : ) 系列 1. ExtJs 备忘录(1)-- Form表单(一) [ 控件使用 ] 2. ExtJs 备忘录(2)-- Form表单(二) [ 控件封装 ] 3. ExtJs 备忘录(3)-- Form表单(三) [ 数据验证 ] 推荐 1. ExtJS中表单验证使用自定义vtype示例  2. ExtJs2.0学习系列(5)--Ext.FormPanel之

ExtJs之Ajax模式的表单数据加载

简单: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 <!DOCTYPE htm

实用ExtJS教程100例-005:自定义对话框Ext.MessageBox.show

我们对ExtJS对话框进行了三篇演示: MessageBox的三种用法 进度条对话框Ext.MessageBox.progress 等待对话框Ext.MessageBox.wait 通过上面三篇内容的演示,相信你已经基本上了解了ExtJS的基本样式,这篇文章将演示如何使用自定义ExtJS对话框. Ext.MessageBox.show演示 要显示自定义的对话框,我们需要用到Ext.MessageBox.show方法.先来看一个简单的例子: Ext.get("btn1").on(&quo

extjs创建问题显示不正常

问题描述 extjs创建问题显示不正常 我用extjs创建一个FieldSet,当第一次创建form的时候 可以 正常显示,第二次就不行了,请高手帮忙看看为什么 谢谢,代码如下: var normalFieldSet = new Ext.form.FieldSet({ name: 'normalFieldSet', id: 'normalFieldSet', columnWidth:.33, layout:'form', xtype:'fieldset', autoHeight:true, st

ExtJs之文本框及数字输入

结合HTML来理解, 比较容易. <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css"

【大神求助】关于一个Action跳转extjs的管理页面变为空白页的问题

问题描述 我在登陆页面Login.jsp,设置一个用来测试跳转的Action,跳转其他JSP没问题.但是测试跳转一个设计好的管理页面extjs时候,Action跳转后变为页面变为空白页,但用浏览器能够看到源码,于是我直接超链接这个页面却没有问题能够显示.究竟是什么问题啊求大神指引..login.jsp<formaction="login/Login"method="post">用户名:<inputname="admin.username&

急..........求解Extjs问题 先谢谢了

问题描述 tbar : [{ id : 'addDiction', text : '新增', iconCls : 'option', handler : function() {var form =new Ext.form.FormPanel({ layout : 'table', layoutConfig : { columns : 2 }, defaults : { layout:'form' }, items:[ {items: [tdictiontype]}, {items: [ttyp