Chèn một nút tại một địa điểm cụ thể trong Ext.tree.panel

Question

Tôi đang cố gắng để thay đổi mẫu TreeGrid js ext này: http://dev.sencha.com/deploy/ext-4.0.1/examples/tree/treegrid.html

Tất cả tôi muốn là thêm một nút tại một địa điểm cụ thể.

Tôi cố gắng này:

var treePanel = Ext.getCmp('treePanel'); 
var selNode = treePanel.getSelectionModel().getSelection()[0]; 
var appendedChild = selNode.appendChild({ 
         task: 'Task1', 
         user: 'Name', 
         duration: '10', 
         leaf: true 
        }); 

Nó cung cấp cho không có lỗi, nhưng UI không cập nhật. Điều tương tự với selNode.insertChild(0, .. Chạy không có lỗi, nhưng giao diện người dùng không cập nhật.

Bằng cách nào đó này hoạt động:

var node = treePanel.store.getRootNode(); 
node.appendChild({ 
        task: 'Task3', 
        user: 'Name', 
        duration: '10', 
        leaf: true 
       }); 

Vậy làm thế nào để tôi thêm/chèn tại một địa điểm cụ thể dựa trên người dùng lựa chọn.

Đây là mã đầy đủ của tôi: http://jsfiddle.net/4T68s/
Tôi đã thay đổi cửa hàng thành dữ liệu tĩnh vì yêu cầu tên miền chéo để lấy dữ liệu json sẽ không hoạt động.

Answer 1

Bạn nên thay đổi leaf tài sản để false trên nút trước khi bạn thêm con với nó:

selNode.set('leaf', false); 

mẫu làm việc: http://jsfiddle.net/lolo/4T68s/6/

Answer 2

Nếu bạn muốn thêm các nút, phụ huynh mới phải không phải là một lá . Tôi đã cập nhật mã của bạn để cung cấp cho bạn một ví dụ về cách bạn thêm nút vào đúng vị trí và cách bạn thay đổi biểu tượng để nó không giống biểu tượng thư mục mẹ, đó là những gì tôi cho rằng bạn đang cố tránh .

http://jsfiddle.net/4T68s/5/

cài đặt cửa hàng của bạn như thế này để các nút cha mẹ được mở rộng và được nạp.

var store = Ext.create('Ext.data.TreeStore', { 
    model: 'Task', 
    root: { 
     expanded: true, 
     children: [ 
      { 
      task: 'Settings', 
      leaf: false, 
      expanded: true, 
      children: [ 
       { 
       task: 'System Settings', 
       expanded: true, 
       loaded: true, 
       icon: 'icon-leaf'}, 
      { 
       task: 'Appearance', 
       expanded: true, 
       loaded: true, 
       } 
      ]} 
     ] 
    } 
}); 

Sau đó, hãy chèn mô hình mới của bạn như thế này.

var selNode = treePanel.getSelectionModel().getSelection()[0]; 
var newTask = Ext.create('Task'); 
newTask.set({ 
    task: 'Task1', 
    user: 'Name', 
    duration: '10', 
    expanded: true, 
    loaded: true, 
    leaf: false, 
    icon: 'icon-leaf' 
}); 

selNode.insertChild(0, newTask); 

Điều đó sẽ tạo ra một nút cha mới mà sau đó bạn sẽ có thể thêm nhiều tác vụ hơn. Sử dụng thuộc tính icon để thiết lập image icon src hoặc iconCls để làm điều đó với CSS. Mặc dù có một lỗi với cách CSS. Nó giữ lại lớp x-tree-icon-parent vì một lý do nào đó.