Come lavorare con treecombo in ExtJS 4.1

Question

ho trovato Insegnante in http://www.sencha.com/forum/showthread.php?198856-Ext.ux.TreeCombo
provo a fare un treecombo in Extjs4.1 in http://jsfiddle.net/rq2ha/ Ecco il mio codice

Ext.onReady(function() { 
     Ext.create('Ext.ux.TreeCombo', { 
      margin:10, 
      width:120, 
      height: 10, 
      treeHeight: 10, 
      treeWidth: 240, 
      renderTo: 'treecombo3', 
      store: storeMenu, 
      selectChildren: false, 
      canSelectFolders: true 
      ,itemTreeClick: function(view, record, item, index, e, eOpts, treeCombo) 
      { 
       var id = record.data.id; 
       // I want to do something here. 
       // But combo do nothing (not selected item or not finish) when i init itemTreeClick function 
      } 
     }); 
}); 

primo problema: I voglio ottenere l'id dell'albero e fare qualcosa quando clicco su un oggetto dell'albero su una combo. Ma combo non completo (selezionato) quando clicco (combo non fare nulla).

secondo problema: se cambio negozio è dinamico come

var treestore = Ext.create('Ext.data.TreeStore', { 
     proxy: { 
      type: 'ajax', 
      url: 'example.php', 
      reader: { 
       type: 'json' 
      } 
     }, 
     autoload: true 
    }); 

mi metterò errore

mia JSON

[ { id : '1' , text : 'a', iconCls: 'cls1' ,children :[{ id : '2' , text : 'b', iconCls: 'cls2' ,children :[{ id : '9' , text : 'a', iconCls: 'cls' ,children :[]},{ id : '14' , text : 'a', iconCls: 'c' ,children :[{ id : '33' , text : 'b', iconCls: 'cls' ,children :[{ id : '35' , text : 'a', iconCls: 'cls' ,children :[{ id : '36' , text : 'a', iconCls: 'cls' ,children :[]}]}]}]},{ id : '16' , text : 'd', iconCls: 'cls' ,leaf:true}]},... 

come posso risolvere questo grazie

Answer 1

Per risolvere il secondo problema, è necessario specificare il nodo principale quando si crea l'albero negozio.

var treestore = Ext.create('Ext.data.TreeStore', { 
     root: { 
      text: 'Root', 
      id: '0' 
     }, 
     proxy: { 
      type: 'ajax', 
      url: 'example.php', 
      reader: { 
       type: 'json' 
      } 
     }, 
     autoload: true 
    }); 

Inoltre, devo dire che il nome della variabile è stato utilizzato per l'archivio albero nell'esempio jsfiddle è storeMenu piuttosto che treestore. Pertanto, se si desidera sostituire l'archivio ad albero statico con la versione ajax, assicurarsi di utilizzare il nome della variabile corretto.

Answer 2

Sostituire

// I want to do something here. 

con le seguenti due righe:

this.setValue(id); 
this.collapse(); 

Answer 3

Informazioni sul primo problema, tentando di utilizzare il metodo "itemTreeClick" direttamente nell'istanza TreeCombo, si sta sovrascrivendo questo comportamento dalla classe Ext.ux.TreeCombo. Questo metodo è responsabile dell'impostazione effettiva della selezione nella combo. Quindi, ecco perché non succede nulla al momento (questo comportamento è overrideng).

Se si desidera eseguire un'operazione con la selezione una volta completata la combo, rilasciare il metodo "itemTreeClick" dall'istanza e posizionare un listener "itemclick". Date un'occhiata al seguente frammento di codice:

Ext.create('Ext.ux.TreeCombo', { 
     margin:10, 
     width:120, 
     height: 10, 
     treeHeight: 10, 
     treeWidth: 240, 
     renderTo: 'treecombo3', 
     store: storeMenu, 
     selectChildren: false, 
     canSelectFolders: true, 
     listeners : { 
      itemclick : function(view, record, item, index, e, eOpts){ 
       var id = record.data.id 
       //now you can do something here... 
      } 
     } 
    }); 

UPDATE:

Ecco il violino di lavoro utilizzando la risposta di cui sopra:

http://jsfiddle.net/txaa0kw6/