Làm cách nào để tìm nút đã chọn trong ExtJS TreePanel?

Question

Tôi đang cố truy xuất nút đã chọn, nếu có, của TreePanel khi người dùng nhấp vào nút. Làm thế nào để bạn lấy nút chọn trong một TreePanel? Cảm ơn.

Answer 1

Điều bạn sẽ làm là tạo trình xử lý sự kiện. Mỗi đối tượng ExtJs có một số sự kiện được tự động liên kết với chúng. Bạn sẽ viết một trình xử lý sự kiện (một hàm) mà sau đó bạn có thể gán cho một trình nghe sự kiện. Vì vậy, trong trường hợp này, bạn có thể muốn gán một trình xử lý sự kiện cho sự kiện 'click' của thành phần TreePanel của bạn.

var tbPan = new Ext.tree.TreePanel({ 
    itemId:'navTree', 
    autoScroll: true, 
    root: new Ext.tree.TreeNode({ 
     id: 'root', 
     text: 'My Tree Root', 
     rootVisible: true 
    }), 
    listeners: { 
     click: { 
      fn:clickListener 
     } 
    } 
}); 

clickListener = function (node,event){ 
    // The node argument represents the node that 
    // was clicked on within your TreePanel 
}; 

Nhưng, điều gì sẽ xảy ra nếu bạn muốn biết một nút đã được chọn? Tại thời điểm đó, bạn sẽ cần truy cập vào Model Selection của TreePanel. Bạn đã đề cập đến một thao tác nút. Hãy nói rằng bạn muốn áp dụng một chức năng để xử lý nhấp chuột của nút đó để có được những nút chọn:

var btn = new Ext.Button({ 
    text: 'Get Value', 
    handler: function (thisBtn,event){ 
     var node = Ext.fly('navTree').getSelectionModel().getSelectedNode(); 
    } 
}); 

Bạn đã sử dụng yếu tố hạng ruồi để có được một tài liệu tham khảo nhanh vào TreePanel bản thân, sau đó sử dụng phương pháp nội TreePanel của để nhận được đó là Mô hình lựa chọn. Sau đó, bạn sử dụng phương thức bên trong của Model Selection (trong trường hợp này là DefaultSelectionModel) để có được nút chọn.

Bạn sẽ tìm thấy nhiều thông tin trong Tài liệu Ext JS. API ứng dụng trực tuyến (và ngoại tuyến AIR) khá rộng rãi. Cẩm nang Ext Core cũng có thể cung cấp cho bạn rất nhiều thông tin chi tiết về phát triển ExtJS, ngay cả khi bạn không sử dụng Core trực tiếp.

Answer 2

var selectednode = tree.getSelectionModel().getSelectedNode(); 

       //alert(selectednode); 
       if(selectednode!=tree.getRootNode()) 
       selectednode.remove(); 

Answer 3

@Steve

Ext.fly('navTree').getSelectionModel().getSelectedNode();

không được đi làm, sử dụng

Ext.getCmp('navTree').getSelectionModel().getSelectedNode();

để thay thế.

Answer 4

Trong Ext JS 4 bạn có thể đặt một người biết lắng nghe trên bảng điều khiển cây như thế này:

listeners: { 

    itemclick: { 
     fn: function(view, record, item, index, event) { 
      //the record is the data node that was clicked 
      //the item is the html dom element in the tree that was clicked 
      //index is the index of the node relative to its parent 
      nodeId = record.data.id; 
      htmlId = item.id; 
     } 
    } 

} 

Answer 5

var myTree = Ext.getCmp('tree-panel'); 
var selectednode = myTree.selModel.selNode 

Answer 6

Đối ExtJS 4 ...

Tôi đã thêm người nghe sau trong bảng điều khiển cây của tôi :

listeners: 
{ 
    itemclick: function(view, record, item, index, e) 
    { 
    selected_node = record; 
    } 
} 

trong đó select_node là biến toàn cục. Các chức năng như append và loại bỏ có thể được sử dụng với biến hồ sơ này ví dụ .:

selected_node.appendChild({text: 'New Node', leaf: true}); 
selected_node.remove(); 

Tôi đã tạo ra nút để Add Node và Delete Node mà sử dụng ở trên để thêm và loại bỏ các nút đến nút chọn. remove() sẽ xóa nút đã chọn cũng như tất cả các nút con!

Bạn cũng có thể nhận được nút đã chọn bất kỳ lúc nào bằng cách sử dụng (lựa chọn xảy ra bên trái cũng như nhấp chuột phải): var selected_node = Ext.getCmp ('tree_id'). GetSelectionModel(). GetSelection() [0 ];

Answer 7

Trong ExtJS4 bạn có thể sử dụng phương thức getLastSelected() trả về mục được chọn cuối cùng trong một cây.

Xem ExtJS: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-getLastSelected

Một ví dụ có thể trông như thế này:

var tree = this.up("window").down("supportedcontrolcircuitmodelselector"); 
var selectedCircuit = tree.getSelectionModel().getLastSelected() 

Answer 8

var nodesSelected = Ext.getCmp('foldersTree').getSelectionModel().selected.items; 
if(nodesSelected.length > 0) 
{ 
    var node = nodesSelected[0]; 
    console.log(node.internalId); 
} 

này là dành cho ExtJS4 TreePanel

Answer 9

var tree = Ext.create('Ext.tree.Panel', { 
    store: store, 
    renderTo: 'tree_el', 
    height: 300, 
    width: 250, 
    title: 'ExtJS Tree PHP MySQL', 
    tbar : [{ 
     text: 'get selected node', 
     handler: function() { 
      if (tree.getSelectionModel().hasSelection()) { 
       var selectedNode = tree.getSelectionModel().getSelection(); 

       alert(selectedNode[0].data.text + ' was selected'); 
      } else { 
       Ext.MessageBox.alert('No node selected!'); 
      } 

     } 

    }] 

}); 

Answer 10

đơn giản ....

itemclick: function(view, record, item, index, e) 
{ 
    alert(record.data.text); 
}