달력

112017  이전 다음

  •  
  •  
  •  
  • 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
  •  
  •  

Extjs 2.2.1 을 다운로드 받아서 트리메뉴와 layout 을 이용하려고 했다.

TreeMenu 를 구성하는 데이터는 XML 을 이용함.

그러나!!!! 의도된 동작이 일어나지 않음.

FireBug 를 동원하여 에러분석 돌입.

FireBug 에서는 405 Method Not Allowed  에러 메시지 출력.

그래서... Xml을 읽어오는 TreeLoader 에 옵션으로 아래와 같이 설정.

requestMethod:'GET'

동작 잘 한다...


아래는 ExtJS 에서 제공하는 XmlTreeLoader 샘플 Javascript 파일이다.

붉은 글씨를 유의하여 보면 됨.

 
/*
 * Ext JS Library 2.2.1
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */


//
// Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:
//
Ext.app.BookLoader = Ext.extend(Ext.ux.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.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
        }]
    });
});




신고
Posted by Tornado tornado