2013-09-21 16 views
5

creo un treepanel e io e creare store comeExtjs4.2.1 - Carico JSON per treepanel non riesce

  var store = Ext.create('Ext.data.TreeStore', { 
      autoload: false, 
      proxy: { 
       type: 'ajax', 
       url: 'data.php', 
       reader: { 
        type: 'json', 
        root: 'results'     
       } 
      } 
      }); 

mio server di stampa JSON sembrare

{ "results": 
    [ 
    { id : '1' , text : '1', expanded: true, 
     children :[ 
      { id : '5' , text : '5', leaf:true}, 
      { id : '6' , text : '6', leaf:true} 
     ] 
    }, 
    { id : '2' , text : '2', leaf:true}, 
    { id : '3' , text : '3', leaf:true}, 
    { id : '4' , text : '4', leaf:true}, 
    { id : '7' , text : '7', leaf:true}, 
    { id : '8' , text : '8', leaf:true}, 
    { id : '9' , text : '9', leaf:true}, 
    { id : '10' , text : '10', expanded: true, 
     children :[ 
      { id : '11' , text : '11', leaf:true}, 
      { id : '12' , text : '12', leaf:true} 
     ] 
    } 
    ] 
} 

Ma quando ho eseguito il mio codice, ho vedi firebug e che funziona sempre senza interruzione:

e il mio albero viene aggiunto così tanto doppio

Come risolvere che ringraziare

Modifica
IN REAL definisco la mia treepanel con alias e di utilizzarlo come xtype
Ma io creo nuovi esempio e ottenere lo stesso problema. Ecco il mio js

var store = Ext.create('Ext.data.TreeStore', { 
      autoload: false, 
      proxy: { 
       type: 'ajax', 
       url: 'data.php', 
       reader: { 
        type: 'json', 
        root: 'results'     
       } 
      } 
     }); 

     Ext.create('Ext.tree.Panel', { 
      title: 'Simple Tree', 
      width: 200, 
      height: 150, 
      store: store, 
      rootVisible: false, 
      renderTo: Ext.getBody() 
     }); 

Ed ecco la mia data.php

echo " 
{ 
    'success': true, 
    'variable': 100, 
    'results': 
    [ 
    { id : '1' , text : '1', expanded: true, 
     children :[ 
      { id : '5' , text : '5', leaf:true}, 
      { id : '6' , text : '6', leaf:true} 
     ] 
    }, 
    { id : '2' , text : '2', leaf:true}, 
    { id : '3' , text : '3', leaf:true}, 
    { id : '4' , text : '4', leaf:true}, 
    { id : '7' , text : '7', leaf:true}, 
    { id : '8' , text : '8', leaf:true}, 
    { id : '9' , text : '9', leaf:true}, 
    { id : '10' , text : '10', expanded: true, 
     children :[ 
      { id : '11' , text : '11', leaf:true}, 
      { id : '12' , text : '12', leaf:true} 
     ] 
    } 
    ] 
}"; 

risposta

5

quello che avete qui è qualcosa che io ritengo essere un bug nel treestore. Quando si modifica il lettore per utilizzare una radice che non è children, è inoltre necessario modificare ogni istanza del nome della proprietà figli nei dati con il nuovo nome. Ciò significa che se si vuole cambiare il root per results, i dati degli alberi sarebbe in realtà hanno a guardare qualcosa di simile:

echo " 
{ 
    'success': true, 
    'variable': 100, 
    'results': 
    [ 
    { 'id' : '1' , 'text' : '1', 'expanded': true, 
     'results':[ 
      { 'id' : '5' , 'text' : '5', 'leaf':true}, 
      { 'id' : '6' , 'text' : '6', 'leaf':true} 
     ] 
    }, 
    { 'id' : '2' , 'text' : '2', 'leaf':true}, 
    { 'id' : '3' , 'text' : '3', 'leaf':true}, 
    { 'id' : '4' , 'text' : '4', 'leaf':true}, 
    { 'id' : '7' , 'text' : '7', 'leaf':true}, 
    { 'id' : '8' , 'text' : '8', 'leaf':true}, 
    { 'id' : '9' , 'text' : '9', 'leaf':true}, 
    { 'id' : '10' , 'text' : '10', 'expanded': true, 
     'results':[ 
      { 'id' : '11' , 'text' : '11', 'leaf':true}, 
      { 'id' : '12' , 'text' : '12', 'leaf':true} 
     ] 
    } 
    ] 
}"; 

L'altra opzione è quella di cambiare il livello superiore results nome della proprietà per children e segnare la radice di il tuo negozio come children.

+1

Mi ci è voluto un po 'per capire questo in origine perché il comportamento non ha senso. usa una tonnellata di alberi nella nostra app. – Reimius

+0

questo è un problema grazie a te :) – freestyle

1

controllare l'ortografia autoLoad config.

var store = Ext.create('Ext.data.TreeStore', { 
     // autoload: false, 
      autoLoad : false, 
      proxy: { 
       type: 'ajax', 
       url: 'data.php', 
       reader: { 
        type: 'json', 
        root: 'results'     
       } 
      } 
      }); 
+0

mi limito a cambiare e ottenere lo stesso problema :( – freestyle

+0

è possibile fornire treepanel configurazione? – jeewiya

+0

plz vedere la mia modifica – freestyle

0

si può solo aggiungere i dati di root per memorizzare come seguire

var store = Ext.create('Ext.data.TreeStore', { 
      autoLoad : false, 
      root: { 
       text: 'Corporate Media', 
       id: '0', 
       expanded: true 
      } 
      proxy: { 
       type: 'ajax', 
       url: 'data.php', 
       reader: { 
        type: 'json', 
        root: 'results'     
       } 
      } 
      }); 
+0

che non è ancora lavorando :( – freestyle

+0

si può creare esempio sul jsfiddle utilizzando il codice. Vado a controllare esso. – jeewiya

+0

ma quello che uso php e jsfiddle penso che non sia possibile. Sto usando extjs 4.2.1.883, modificherò il mio titolo – freestyle

Problemi correlati