मैं एक ExtJS TreePanel में चयनित नोड कैसे ढूंढूं?

Question

जब उपयोगकर्ता एक बटन क्लिक करता है तो मैं ट्रीपैनल के चयनित नोड को, यदि कोई हो, पुनर्प्राप्त करने का प्रयास कर रहा हूं। आप TreePanel में चयन नोड को कैसे पुनर्प्राप्त करते हैं? धन्यवाद।

Answer 1

आप क्या करेंगे एक ईवेंट हैंडलर बनाते हैं। प्रत्येक ExtJs ऑब्जेक्ट में कई घटनाएं होती हैं जो स्वचालित रूप से उनके साथ जुड़ी होती हैं। आप एक ईवेंट हैंडलर (एक फ़ंक्शन) लिखेंगे जिसे आप किसी इवेंट श्रोता को असाइन कर सकते हैं। इसलिए, इस मामले में, आप शायद अपने TreePanel घटक के 'क्लिक' ईवेंट में ईवेंट हैंडलर असाइन करना चाहते हैं।

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

लेकिन, यदि आप पहले से चुने गए नोड को जानना चाहते हैं तो क्या होगा? उस समय आपको TreePanel के चयन मॉडल तक पहुंचने की आवश्यकता होगी। आपने एक बटन एक्शन का उल्लेख किया है।

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

आप TreePanel खुद के लिए एक त्वरित संदर्भ पाने के लिए फ्लाईवेट तत्व का इस्तेमाल किया है, तो उस प्राप्त करने के लिए TreePanel के आंतरिक विधि का इस्तेमाल किया: मान लीजिए कि आप चयनित नोड पाने के लिए उस बटन के क्लिक हैंडलर करने के लिए एक समारोह लागू करना चाहते थे चलो यह चयन मॉडल है। उसके बाद आपने चयनित नोड प्राप्त करने के लिए उस चयन मॉडल का उपयोग किया (इस मामले में डिफ़ॉल्ट चयन मॉडल) आंतरिक विधि।

आपको एक्सटी जेएस दस्तावेज़ीकरण के भीतर जानकारी की एक संपत्ति मिल जाएगी। ऑनलाइन (और ऑफलाइन एआईआर ऐप) एपीआई काफी व्यापक है। एक्स्ट्रा कोर मैनुअल आपको एक्स्टजेस विकास में अंतर्दृष्टि का एक बड़ा सौदा भी दे सकता है, भले ही आप सीधे कोर का उपयोग नहीं कर रहे हों।

Answer 2

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

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

Answer 3

@Steve

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

, काम के बजाय

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

उपयोग करने के लिए नहीं जा रहा है।

Answer 4

Ext में जे एस 4 आप इस तरह पेड़ पैनल पर एक श्रोता रख सकते हैं:

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

ExtJS 4 के लिए ...

मैं अपने पेड़ पैनल में निम्नलिखित श्रोता जोड़ लिया है :

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

जहां चयनित_नोड वैश्विक चर है। संलग्न की तरह कार्य करता है और हटाने के इस रिकॉर्ड चर उदा .:

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

मैं नोड जोड़ें के लिए बटन बनाया है और जो संलग्न करें और चयनित नोड के लिए नोड्स दूर करने के लिए ऊपर का उपयोग नोड हटाएँ है के साथ प्रयोग किया जा सकता है। निकालें() चयनित नोड के साथ ही सभी बच्चे नोड्स को हटा देगा!

तुम भी चयनित नोड किसी भी समय का उपयोग कर प्राप्त कर सकते हैं (चयन सही माउस क्लिक के साथ ही छोड़ दिया के साथ होता है):। वर SELECTED_NODE = Ext.getCmp ('tree_id') getSelectionModel() getSelection() [0। ];

Answer 7

ExtJS4 में आप getLastSelected() विधि का उपयोग कर सकते हैं जो एक पेड़ में अंतिम चयनित आइटम देता है।

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

एक उदाहरण इस प्रकार दिखाई देंगे:

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

यह वह जगह है के लिए 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

सरल ....

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