使用Ext.js 4.2选择一个已选择的Treenode(重新选择)

时间:2018-07-05 15:36:54

标签: javascript extjs

我有一个Treepanel(Ext.tree.Panel),它在select上加载了另一个面板。现在,当我在另一个面板中更改某些数据时,我想更改树中的节点,然后重新选择它(取决于存储在节点上的数据,选择时会触发一些计算)。 现在的问题是,如何重新选择一个已经选择的节点,以便选择处理程序获得适当的参数? 使用Treepanel.fireEvent("select")不会将选择交给处理程序。我还尝试在该节点上触发事件或使用Treepanel.selectPath(correctPath),但是由于该节点已被选中,因此不会触发...

要测试的简单示例:

var test = function () {
Ext.create("Ext.window.Window", {
    items: [{
        xtype: "treepanel",
        width: 200,
        height: 150,
        store: Ext.create("Ext.data.TreeStore", {
            root: {
                expanded: true,
                children: [
                    { text: "test0", leaf: true, dataForSomeOtherOperation: { x: 1, y: 1 } },
                    { text: "test1", leaf: true, dataForSomeOtherOperation: { x: 1, y: 1 } },
                    { text: "test2", leaf: true, dataForSomeOtherOperation: { x: 1, y: 1 } },
                ]
            }
        }),
        listeners: {
            select: function (model, selected) {
                this.up("window").down("button").setDisabled(false);
                alert(selected.data.dataForSomeOtherOperation.x);
            }
        }
    }],
    tbar: {
        items: [{
            text: "Some Event Changing Selected Node",
            disabled:true,
            listeners: {
                click: function () {
                    var treePanel = this.up("window").down("treepanel"),
                        selected = treePanel.getSelectionModel().getSelection()[0];
                    selected.data.dataForSomeOtherOperation.x = 666;
                    treePanel.fireEvent("select"); <--***
                }
            }
        }]
    }
}).show();
}

问题是:当按下按钮时,用***替换该行以获取alert()的方法是什么?

(我正在使用Ext.js 4.2) (选择一个节点以启用示例中的按钮)

1 个答案:

答案 0 :(得分:1)

只需取消全选并重新选择节点,如下所示:

Ext.application({
    name: 'Fiddle',

    launch: function () {


            Ext.create("Ext.window.Window", {
                items: [{
                    xtype: "treepanel",
                    width: 200,
                    height: 150,
                    store: Ext.create("Ext.data.TreeStore", {
                        root: {
                            expanded: true,
                            children: [{
                                text: "test0",
                                leaf: true,
                                dataForSomeOtherOperation: {
                                    x: 1,
                                    y: 1
                                }
                            }, {
                                text: "test1",
                                leaf: true,
                                dataForSomeOtherOperation: {
                                    x: 1,
                                    y: 1
                                }
                            }, {
                                text: "test2",
                                leaf: true,
                                dataForSomeOtherOperation: {
                                    x: 1,
                                    y: 1
                                }
                            }, ]
                        }
                    }),
                    listeners: {
                        select: function (model, selected, record,r,t) {
                            this.up("window").down("button").setDisabled(false);
                            alert(selected.raw.dataForSomeOtherOperation.x);
                        }
                    }
                }],
                tbar: {
                    items: [{
                        text: "Some Event Changing Selected Node",
                        disabled: true,
                        listeners: {
                            click: function () {
                                var treePanel = this.up("window").down("treepanel");
                                var selected = treePanel.getSelectionModel().getSelection()[0];

                                selected.raw.dataForSomeOtherOperation.x = 666;

                                //Fire the event by deselecting and reselecting
                                treePanel.getSelectionModel().deselectAll();
                                treePanel.getSelectionModel().select(selected)

                            }
                        }
                    }]
                }
            }).show();

    }
});