> 웹 프론트엔드 > JS 튜토리얼 > ExtJs 3.1 XmlTreeLoader 예 Error_extjs

ExtJs 3.1 XmlTreeLoader 예 Error_extjs

WBOY
풀어 주다: 2016-05-16 18:34:54
원래의
904명이 탐색했습니다.

머리말
키워드: 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
* 라이센싱@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
}]
});



결론

포기하지 말고 검색어를 계속 바꿔보세요. 이해하지 못해도 상관없습니다. 코드만 이해하면 됩니다. :)
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿