Làm thế nào để làm việc với treecombo trong ExtJS 4.1

Question

tôi thấy gia sư trong http://www.sencha.com/forum/showthread.php?198856-Ext.ux.TreeCombo
tôi cố gắng để thực hiện một treecombo trong Extjs4.1 trong http://jsfiddle.net/rq2ha/ đây là mã của tôi

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 vấn đề: tôi muốn lấy id của cây và làm điều gì đó Khi tôi bấm vào mục cây trên combo. Nhưng combo không hoàn thành (seleted) khi tôi click (combo không làm gì cả).

vấn đề thứ 2: nếu tôi thay đổi cửa hàng là năng động như

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

tôi sẽ nhận được lỗi

json tôi

[ { 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}]},... 

Làm thế nào tôi có thể khắc phục điều đó cảm ơn

Answer 1

Để giải quyết vấn đề thứ hai của bạn, bạn cần phải xác định nút gốc khi tạo cây cửa hàng.

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

Ngoài ra, tôi nên đề cập đến rằng tên biến bạn sử dụng cho các cửa hàng cây trong ví dụ jsfiddle là storeMenu hơn treestore. Vì vậy, nếu bạn muốn thay thế kho lưu trữ cây tĩnh bằng phiên bản ajax, hãy đảm bảo bạn đang sử dụng tên biến chính xác.

Answer 2

Thay

// I want to do something here. 

với hai dòng sau:

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

Answer 3

Về vấn đề đầu tiên của bạn, bằng cách cố gắng sử dụng phương pháp 'itemTreeClick' trực tiếp trong ví dụ TreeCombo của bạn, bạn đang ghi đè hành vi này từ lớp Ext.ux.TreeCombo. Phương pháp này có trách nhiệm thực sự thiết lập lựa chọn của bạn vào combo. Vì vậy, đó là lý do tại sao không có gì xảy ra ngay bây giờ (hành vi đó là overrideng).

Nếu bạn muốn làm điều gì đó với lựa chọn sau khi kết hợp được điền, hãy thả phương thức 'itemTreeClick' từ thể hiện của bạn và đặt trình nghe 'itemclick'. Hãy xem đoạn sau:

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:

Đây là fiddle làm việc bằng cách sử dụng câu trả lời ở trên:

http://jsfiddle.net/txaa0kw6/