ExtJs 3.1 XmlTreeLoader の例 Error_extjs

前書き
キーワード: ExtJs 3.1 XmlTreeLoader サンプル エラー、XmlTreeLoader エラー、TreePanel エラー

私はほぼ午後から夜にかけて ExtJs 3.1 の XmlTreeLoader サンプルに苦労しました。公式の サンプル は問題なく、ローカル IIS が機能しません。公式コードを直接確認しても全く同じでした。公式サイトには見つかりませんでしたが、オマージュとしてこの記事を載せます。簡単な中国語の「翻訳」。

原文
http://javarush.com/entry/ExtJS-XmlTreeLoader-Error

テキスト

1. コードの場所: Ext3.1examplestreexml-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
*/

//
// XmlTreeLoader を拡張していくつかのカスタム TreeNode 属性を設定します私たちのアプリケーションに固有:
//
Ext.app.BookLoader = Ext.extend(Ext.ux.tree.XmlTreeLoader, {
processAttributes : function(attr){
if(attr.first) ){ // それは作成者ノードですか?

// 生データにはテキスト属性が含まれていないため、ツリーに表示されるノードのテキストを設定します:
attr.text = attr.first ' ' attr.last;

// 性別フラグを使用して特定のアイコンを選択する:
attr.iconCls = 'author-' attr.gender;

// オーバーライドすべてのデータを一度にロードしているため、これらの値はフォルダー ノードに適用されます。
// 各ノードを非同期的にロードする場合 (デフォルト)、次のようなことは望ましくありません。
attr.loaded = true;
attr.expanded = true ;
}
else if(attr.title){ // それはブックノードですか?

// ツリーに表示されるノードのテキストを設定します生データにはテキスト属性が含まれていないため:
attr.text = attr.title ' (' attr.published ')';

// 書籍アイコン:
attr.iconCls = ' book';

// これがリーフ ノードであることをツリーに伝えます。これは、元の XML
// の属性として渡すこともできますが、この例では、次の場合でもこれを制御できることを示しています。
// 受信ソース XML の形式を指定できません:
attr.leaf = true;
}
}
}); ){

var 詳細Text = '詳細を表示するには書籍を選択してください...';

var tpl = new Ext.Template(
'

{title}

',
'

公開済み: {公開済み}

',
'

概要: {innerText}

'、
'

Amazon から購入'
tpl.compile();

title: '読書リスト' 、
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() ,

// カスタム TreeLoader:
loader: new Ext.app.BookLoader({
dataUrl:'xml-tree-data.xml' ,requestMethod: 'GET'
}),

listeners: {
'render': function(tp){
tp.getSelectionModel().on('selectionchange', function (ツリー, ノード){
var el = Ext.getCmp('details-panel').body;
if(node && node.leaf){
tpl.overwrite(el, ノード.属性);
}else{
el.update(detailsText);
}
})
}
}
},{
地域: '南' 、
タイトル: '書籍の詳細'、
id: 'details-panel'、
autoScroll: true、
折りたたみ可能: true、
分割: true、
マージン: '0 2 2 2',
cmargins: '2 2 2 2',
height: 220,
html: 詳細テキスト
}]
});



結論


検索が失敗しても諦めずに検索キーワードを変更してみてください。理解できなくても問題ありません。境界線のないコードを理解してください。:)