1. #1
    Ext User
    Join Date
    Aug 2007
    Posts
    16
    Vote Rating
    0
    aarcro is on a distinguished road

      0  

    Thumbs up [Solved] Tree only expands first node, then stops responding. (Duplicate IDs in JSON)

    [Solved] Tree only expands first node, then stops responding. (Duplicate IDs in JSON)


    This renders fine. With the tree appearing in the first slot of the accordion in west panel. I've also dumbed it down (but already deleted the code) to just having the tree panel as the west panel. What happens is:

    1. only the first tree node will expand
    2. clicking a leaf=false node selects the leaf=true node below it.
    3. no nodes will collapse.

    javascript (dmfs.js):
    Code:
    // reference local blank image
    Ext.BLANK_IMAGE_URL = '/js/extjs/resources/images/default/s.gif';
    
    // create namespace
    Ext.namespace('dmfs');
    
    // -----------------
    // File system tree object
    dmfs.fsTree = function() {
      // do NOT access DOM from here; elements don't exist yet
    
      // private variables
      var tree_panel;
      var root;
    
      // private functions
      // Click handlers
      //var btn1Handler = function(button, event) { };
    
      // public space
      return {
        // public properties, e.g. strings to translate
        //btn1Text: 'Button 1',
    
        // public methods
        init: function() {
          //alert( 'dmfs.fsTree init called' );
    
          tree_panel = new Ext.tree.TreePanel({
            applyTo: 'tree-panel'
            , autoScroll: true
            , containerScroll: true
            , enableDD: false
            , rootVisible: false
            , root: new Ext.tree.AsyncTreeNode( { id:'0', expanded: true } )
            , loader: new Ext.tree.TreeLoader( { dataUrl:'/dmfs/directory_node/' } )
          });
    
        }
      };
    }(); // end of dmfs.fsTree
    
    // ------------------------
    // create application
    dmfs.app = function() {
      // do NOT access DOM from here; elements don't exist yet
    
      // private variables
      //var westPanel;
    
      // private functions
    
      // public space
      return {
        // public properties, e.g. strings to translate
    
        // public methods
        init: function() {
          //alert( 'dmfs.app init called' );
          dmfs.fsTree.init(); //.apply( dmfs.fsTree );
          //return;
    
          var viewport = new Ext.Viewport({
            layout: 'border'
            , items: [{
              region: 'west'
              , id: 'west-panel'
              , split: true
              , title: 'West'
              , width: 200
              , minSize: 100
              , collapsible: true
              , margins: '0 0 0 0'
              , layout: 'accordion'
              , layoutConfig: {
                animate: true
              }
              , items: [ {
                title: 'Dynamic Tree'
                , el: 'tree-panel'
                , border: false
    
              },{
                contentEl: 'static-tree'
                , title: 'Static Frame'
                , border: false
              }]
            },{
              region: 'center'
              , id: 'center-panel'
            }]
          });
        }
      };
    }(); // end of dmfs.app
    
    // end of file
    html:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="/js/extjs/resources/css/ext-all.css">
        <script type="text/javascript" src="/js/extjs/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/js/extjs/ext-all-debug.js"></script>
        <script type="text/javascript" src="dmfs.js"></script>
        <!-- A Localization Script File comes here -->
        <script type="text/javascript">
            Ext.onReady(dmfs.app.init, dmfs.app);
        </script>
        <title>Beginning Admin development</title>
    </head>
    <body>
    <div id="west-panel">
    <div id="tree-panel"></div>
    <div id="static-tree"><p>This is static content for an accordion item</p></div>
    </div>
    <div id="center-panel"></div>
    </body>
    </html>
    Initial JSON response:
    Code:
    [{"text": "Templates", "leaf": false, "id": 1}, {"text": "Views", "leaf": false, "id": 2}, {"text": "snp-home_page", "leaf": true, "id": 2}, {"text": "index", "leaf": true, "id": 4}]
    Could there be a bug with the tree some how, or is there a problem with my JSON that I'm just not seeing? Oohhh, should id be a string, not integer? Shouldn't matter to javascript right?

    As a side note, I'm not really clear from the docs when to use el, applyTo, or renderTo. Infact 'el' is not even mentioned as a config option for treePanel, but I see it used in examples and has produced working code for me (but not working node expansion).
    Last edited by aarcro; 13 Nov 2007 at 9:04 AM. Reason: Solution found

  2. #2
    Ext User para's Avatar
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918
    Vote Rating
    -2
    para has a little shameless behaviour in the past

      0  

    Default


    I would recommend taking the ids out of the nodes if you can. I had similar problems with the tree nodes when clicking, and it is because Ext uses the tree node ID to figure out which node was clicked.

    I'd bet it has something to do with the Ids.

  3. #3
    Ext User
    Join Date
    Aug 2007
    Posts
    16
    Vote Rating
    0
    aarcro is on a distinguished road

      0  

    Default


    Quote Originally Posted by para View Post
    I would recommend taking the ids out of the nodes if you can. I had similar problems with the tree nodes when clicking, and it is because Ext uses the tree node ID to figure out which node was clicked.

    I'd bet it has something to do with the Ids.
    Exactly right. I just figured this out. I had duplicate id's. I refactored how my IDs get written and everything is working now.

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi