Jak pracować z treecombo w ExtJS 4,1

Question

znalazłem nauczyciela w http://www.sencha.com/forum/showthread.php?198856-Ext.ux.TreeCombo
próbuję zrobić treecombo w Extjs4.1 w http://jsfiddle.net/rq2ha/ Oto mój kod

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 
      } 
     }); 
}); 

1-te Problem: I chcę uzyskać id drzewa i zrobić coś Kiedy klikam element drzewa na combo. Ale kombinacja nie jest kompletna (seleted) kiedy klikam (combo nic nie robię).

2-ty Problem: jeśli zmienię sklep jest dynamiczna jak

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

będę się błąd

mój 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}]},... 

Jak mogę naprawić podziękować

Answer 1

Aby rozwiązać drugi problem, należy określić główny węzeł podczas tworzenia drzewa sklep.

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

Ponadto, należy wspomnieć, że zmienna nazwa używana dla magazynu drzewa w jsfiddle przykład jest storeMenu zamiast treestore. Więc jeśli chcesz zastąpić statyczny magazyn drzewa wersją ajax, upewnij się, że używasz poprawnej nazwy zmiennej.

Answer 2

Wymień

// I want to do something here. 

z dwóch następujących linii:

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

Answer 3

O twoim pierwszym problemie, próbując użyć metody "itemTreeClick" bezpośrednio w instancji TreeCombo, zastępujesz to zachowanie z klasy Ext.ux.TreeCombo. Ta metoda jest odpowiedzialna za faktyczne ustawienie twojego wyboru w combo. Dlatego właśnie w tej chwili nic się nie dzieje (to zachowanie jest nadużywane).

Jeśli chcesz coś zrobić z zaznaczeniem po zapełnieniu kombi, upuść metodę "itemTreeClick" z instancji i umieść detektor "itemclick". Przyjrzeć się następującym fragmencie:

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:

Oto skrzypce pracy stosując powyższą odpowiedź:

http://jsfiddle.net/txaa0kw6/