ExtJS TreePanelで選択したノードを見つける方法を教えてください。

Question

私は、ユーザーがボタンをクリックしたときに、選択されたノードがある場合、それをTreePanelから取得しようとしています。 TreePanelで選択ノードを取得するにはどうすればよいですか？ありがとう。

Answer 1

あなたが行うことは、イベントハンドラを作成することです。各ExtJsオブジェクトには、自動的に関連付けられたいくつかのイベントがあります。イベントハンドラ（関数）を記述して、イベントリスナに割り当てることができます。そのため、この場合、おそらくイベントハンドラをTreePanelコンポーネントの 'click'イベントに割り当てる必要があります。

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そのものへのクイックリファレンスを取得するためにフライ級の要素を使用選択モデルです。その後、選択モデル（この場合はDefaultSelectionModel）の内部メソッドを使用して選択ノードを取得しました。

Ext JSドキュメントには豊富な情報があります。オンライン（およびオフラインAIRアプリケーション）APIは非常に広範囲です。 Ext Coreマニュアルでは、Coreを直接使用していない場合でも、ExtJS開発についての多くの洞察を得ることができます。 @Steve

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

Answer 2

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

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

Answer 3

は、働く代わりに

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

を使用するつもりはありません。

あなたはこのように、ツリーパネルにリスナーを置くことができるのExt JS 4では

Answer 4

：私は私のツリーパネルで、次のリスナーを追加している... ExtJSの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

を：

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

ここで、selected_nodeはグローバル変数です。追記のような関数と削除は、このレコード変数例えば：

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

で使用することができます私は、ノードを追加し、選択したノードにノードを追加したり削除するには、上記を使用してノードを削除するためのボタンを作成しました。 remove（）は、選択されたノードとすべての子ノードを削除します。

また、選択したノードをいつでも取得することができます（左から右にクリックすると選択が発生します）： var 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

の例では、次のようになります。これはExtJS4 TreePanel

Answer 8

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

....

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

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

シンプルです

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