CODEWITHSUNDEEP
javascriptextjs
MMMagic
MMMagic

Reputation: 182

Select an already selected Treenode (reselect) with Ext.js 4.2

I have a Treepanel (Ext.tree.Panel), that on select loads another Panel. Now when I change some data in the other Panel I want to change the node in the Tree and then reselect it (depending on the data stored on the node some calculations are triggered when selecting). Now the question is, how do I reselect an already selected node so that the select handler gets the appropriate arguments? Using Treepanel.fireEvent("select") does not give the selection to the handler. I also tried to fire the event on the node or use Treepanel.selectPath(correctPath) but that doesnt trigger, since the node is already selected...

Simple example to test:

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

The Question is: What to replace the line with the *** with to get an alert() when pressing the button?

(I am using Ext.js 4.2) (select a node to enable the button in the example)

Upvotes: 1

Views: 409

Answers (1)

Fabio Barros
Fabio Barros

Reputation: 1439

Just deselectAll and reselect the node, like this:

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

    }
});

Upvotes: 1

Related Questions