web-dev-qa-db-ja.com

選択したノードをExtJS TreePanelで検索するにはどうすればよいですか？

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

extjstreepanel
16
JD.

あなたがすることは、イベントハンドラを作成することです。各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();
    }
});

Flyweight要素を使用してTreePanel自体へのクイックリファレンスを取得し、そのTreePanelの内部メソッドを使用して、選択モデルを取得しました。その後、その選択モデルの（この場合はDefaultSelectionModel）内部メソッドを使用して、選択されたノードを取得しました。

Ext JSのドキュメントに豊富な情報があります。オンライン（およびオフラインAIRアプリ）APIは非常に広範です。 Ext Coreマニュアルは、Coreを直接使用していなくても、ExtJS開発に関する多くの洞察を提供します。

17
Steve -Cutter- Blades
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!');
            }

        }

    }]

});
11
Sun

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

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

これはExtJS4 TreePanel用です

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

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

ExtJS 4の場合...

ツリーパネルに次のリスナーを追加しました。

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

ここで、selected_nodeはグローバル変数です。追加や削除などの関数は、このレコード変数で使用できます。例：

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

追加Nodeおよび削除Nodeのボタンを作成しました。これらは上記を使用して、選択したノードにノードを追加および削除します。remove（）は選択したノードを削除しますすべての子ノードと同様に！

選択したノードはいつでも使用できます（選択は左クリックと右クリックで発生します）。var selected_node = Ext.getCmp（ 'tree_id'）。getSelectionModel（）。getSelection（）[0];

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

@Steve

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

動作しません、使用してください

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

代わりに。

1
Johannes

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()
1
Chris

シンプル...

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