1. 코드 위치: Ext3.1examplestreexml-tree-loader.js
2. 빨간색으로 표시된 새 코드에 주목", requestMethod: 'GET'"!!
/*!
* Ext JS Library 3.1.0
* Copyright(c) 2006-2009 Ext JS, LLC
* 라이센싱@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
}
}
})
Ext.onReady(function( ){
var DetailsText = '
더 많은 정보를 보려면 책을 선택하세요...'
var tpl = new Ext.Template(
'
{제목}
',
'
게시됨: {게시됨}
',
'
< ;b>시놉시스: {innerText}
',
'
Amazon에서 구매
'
)
tpl.compile()
new Ext.Panel({
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'
}),
리스너: {
'render': function(tp){
tp.getSelectionModel().on('selectionchange', function (트리, 노드){
var el = Ext.getCmp('details-panel').body
if(node && node.leaf){
tpl.overwrite(el, node. 속성);
}else{
el.update(detailsText);
}
})
}
}
},{
지역: 'south' ,
title: 'Book Details' ,
id: 'details-panel',
autoScroll: true,
collapsible: true,
split: true,
margins: '0 2 2 2',
cmargins: '2 2 2 2',
높이: 220,
html: DetailsText
}]
});
결론