16

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

4

10 に答える 10

17

あなたがすることは、イベント ハンドラーを作成することです。各 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 開発に関する多くの洞察を提供します。

于 2009-05-05T13:19:37.363 に答える
11 
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!');
            }

        }

    }]

});
于 2012-08-19T09:02:52.233 に答える
5

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

}
于 2011-04-30T16:01:32.577 に答える
3 
var nodesSelected = Ext.getCmp('foldersTree').getSelectionModel().selected.items;
if(nodesSelected.length > 0)
{
    var node = nodesSelected[0];
    console.log(node.internalId);
}

これはExtJS4 TreePanel用です

于 2011-11-25T11:19:16.667 に答える
3 
var selectednode = tree.getSelectionModel().getSelectedNode();

                //alert(selectednode);
                if(selectednode!=tree.getRootNode())
                selectednode.remove();
于 2009-09-11T06:11:17.670 に答える
2

ExtJS 4 の場合...

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

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

ここで、selected_node はグローバル変数です。append や remove などの関数は、このレコード変数で使用できます。

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

上記を使用して、選択したノードにノードを追加および削除するための Add Node および Delete Node のボタンを作成しました。remove() は、選択したノードとすべての子ノードを削除します!

以下を使用して、いつでも選択したノードを取得することもできます (マウスの左クリックと右クリックで選択が行われます)。

于 2011-07-04T13:15:02.127 に答える
1

@スティーブ

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

動作しません、使用します

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

代わりは。

于 2010-12-22T18:06:01.077 に答える
1 
var myTree = Ext.getCmp('tree-panel');
var selectednode = myTree.selModel.selNode
于 2011-06-29T10:50:27.607 に答える
1

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()
于 2011-11-08T10:18:00.107 に答える