Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Tree is not loading

  1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    64

    Default Tree is not loading

    Hello all,

    i try to work with a simple json tree. When i start the app, the error in IE8 is shown:

    Code:
    Details zum Fehler auf der Webseite
    Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
    Zeitstempel: Wed, 20 Apr 2011 06:48:45 UTC
    
    Meldung: 'loader' ist Null oder kein Objekt
    Zeile: 35886
    Zeichen: 9
    Code: 0
    But i declared my loader in my code:

    Code:
    
    
    var
    panel =new Ext.tree.TreePanel({
    title
    :'reports',
    cls
    :'empty',
    width
    :200,
    height
    :400,
    autoScroll
    :true,
    id
    :'tree-panel',
    animate
    :true,
    root
    :new Ext.tree.AsyncTreeNode({
    text
    :'Root',
    draggable
    :false,
    id
    :'root',
    children
    :'[{"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [{"text" : "A3", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}]}]}]'
    }),
    loader
    :new Ext.tree.TreeLoader()
    });
    What is going wrong?

  2. #2
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750

    Default

    There's no need to use a TreeLoader if you're specifying your "children" locally. You'd use a TreeLoader to lazy load your child nodes from a URL (see dataUrl). To achieve what you want:

    Code:
     
    <html>
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     <title></title>
     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
     <script type="text/javascript" src="../../ext-all-debug.js"></script>
     
    <script type="text/javascript">
    Ext.onReady(function(){
     var jsonData =
     [
      {"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [
       {"text" : "A3", "id" : 1000, "leaf" : false, "cls" : "folder", "children" : [ 
        {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
        {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
        {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
        {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
        {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
       ]}
      ]}
     ];
     
     var tree = new Ext.tree.TreePanel({
      renderTo: Ext.getBody(),
      root: {
       nodeType: 'async',
       text: 'Root',
       draggable: false,
       id: 'root',
       children: jsonData
      }
     });
    });
    </script>
    </head>
    <body>
    </body>
    </html>

  3. #3
    Sencha User
    Join Date
    Jul 2009
    Posts
    64

    Default

    Hi, thanks for reply,

    i still get the following error:

    Code:
    Details zum Fehler auf der Webseite
    Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
    Zeitstempel: Wed, 20 Apr 2011 11:38:49 UTC
    
    Meldung: 'dom' ist Null oder kein Objekt
    Zeile: 10978
    Zeichen: 17
    Code: 0
    
    Meldung: 'loader' ist Null oder kein Objekt
    Zeile: 35886
    Zeichen: 9
    Code: 0
    Code:
    
    
    Ext
    .onReady(function(){
    var json ='[{"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [{"text" : "A3", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}]}]}]'; var panel =new Ext.tree.TreePanel({
    title
    :'reports',
    cls
    :'empty',
    width
    :200,
    height
    :400,
    autoScroll
    :true,
    id
    :'tree-panel',
    animate
    :true,
    loader
    :new Ext.tree.TreeLoader(),
    root
    :{
    nodeType
    :'async',
    text
    :'Root',
    draggable
    :false,
    id
    :'root',
    children
    : json }
    });
    new Ext.Panel({
    renderTo
    : Ext.getBody(),
    region
    :'west',
    id
    :'west-region-container',
    margins
    :'0 0 5 5',
    split
    :true,
    width
    :210,
    layout
    :'accordion',
    items
    : panel });
    });

  4. #4
    Sencha User Screamy's Avatar
    Join Date
    Jun 2008
    Posts
    244

    Default

    Other than a minor bug in your json data (remove the enclosing single quotes), your code sample runs fine for me.

  5. #5
    Sencha User
    Join Date
    Jul 2009
    Posts
    64

    Default

    Omg, thats it!

  6. #6
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750

    Default

    The issue was that with single quotes you're specifying a string; without the single quotes, an object, which is what children expects.

  7. #7
    Sencha User
    Join Date
    Jul 2009
    Posts
    64

    Default

    One question remaining:

    How can i load data from remote into my tree with the intermediate step to transform the received data to a certain json or xml format?

    Here is my course:
    1. sending a request to server via:
    Code:
    
    var json = call('reqURL');
    
    2. transmitting the received data to a further funtion "getJsonFormat(...)":
    Code:
    
    
    function
    call(xml){
    Ext
    .Ajax.request({
    url
    : xml, method:'GET',
    success
    :function( result, request ){
    return getJsonFormat(result.responseText);
    },
    failure
    :function( result, request){
    Ext
    .MessageBox.alert('Failure', result.responseText); }
    });
    }
    3. converting the xml to json string:
    Code:
    
    
    function
    getJsonFormat(result){
    var htmlString ="";
    var services ="";
    var currentName ="";
    var report ="";
    var services = result.split("<service>");
    for(var i =1; i < services.length; i++){
    currentName
    = services[i].split("<name>")[1].split("</name>")[0];
    report
    = services[i].split("location=\"")[1].split("\"/>")[0].replace("/wsdl","");
    var jsonString ='[{\"text\" : \"'+ currentName +'\", \"id\" : \"'+ report +'\", \"leaf\" : true'+'}]';
    }
    return jsonParse(jsonString);
    }
    I expect to get 1 tree leaf.
    But nothing happens but loader is loading...and loading...and loading...

  8. #8
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750

    Default

    As the Ajax request is asynchronous your call() "call" will be completed before the request is. I'd write this sort of thing:

    Code:
     
    function call(xml, callbackFunc) {
    Ext.Ajax.request({ url: xml, method: 'GET',
    success: function( result, request ) { callbackFunc(true, getJsonFormat(result.responseText)); },
    failure:function( result, request) { callbackFunc(false);
    } });
    } //... and use it like... call(xml, function(success, json) { if (success) { // Do what you've got to do with the json } else { // show error message... } });


  9. #9
    Sencha User
    Join Date
    Jul 2009
    Posts
    64

    Default

    Ok, but how can i add my json to my tree?

    Code:
    if (success)
      {
        // Do what you've got to do with the json
      }

  10. #10
    Sencha User
    Join Date
    Jul 2009
    Posts
    64

    Default

    This doesn`t work:

    Code:
    
    
    call
    ('./testwsil.xml',function(success, json){
    if(success){
    document
    .getElementById('root').appendChild(json);
    }else{
    Ext
    .MessageBox.alert('Failure', result.responseText);
    }
    });

Page 1 of 2 12 LastLast

Similar Threads

  1. How to make loading animation during loading a tree
    By yehezqiel in forum Ext 3.x: Help & Discussion
    Replies: 11
    Last Post: 28 Jul 2010, 11:50 PM
  2. Tree XML Loading
    By stormblow in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 3 Feb 2010, 10:41 PM
  3. Tree loading
    By bkraut in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 9 Sep 2009, 2:15 AM
  4. Replies: 7
    Last Post: 23 Jul 2008, 8:35 AM
  5. Replies: 1
    Last Post: 20 May 2008, 9:47 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •