Using direct events on specific node for ext.net treepanel

Question

I am new to Ext.net with mvc 4. I am trying to create a layout using treepanel and a tab panel. When I a node on a leaf node on the treepanel, I want to load a page using ajax as a new tab

At first I used the code following to load the new tabs with listeners, but it loads in a iframe. I want it to load as a div, but I couldn't get it to work, so I changed to use direct events.

<script>
var mainContainerAddTab = function (tabPanel, id, url, menuItem) {
    var tab = tabPanel.getComponent(id);

    if (!tab) {
        tab = tabPanel.add({
            id: id,
            title: menuItem.raw.text,
            closable: true,
            loader: {
                url: url,
                renderer: 'html',
                loadMask: {
                    showMask: true,
                    msg: 'Loading ' + menuItem.raw.text + '...'
                }
            }
        });

        tab.on('activate', function (tab) {
            var panel = App.MenuTreePanel;
            panel.getSelectionModel().select(panel.getStore().getNodeById(id));
        });
    }

    tabPanel.setActiveTab(tab);
}
</script>

I have succeeded using the code below to load a new tab with direct events but what I am failing to do is get the url for each node.

X.TreePanel()
.ID("MenuTreePanel")
.Model(Html.X().Model()
    .Fields(
        new ModelField("url")
    )
)
.Root(
    X.Node().Text("Menu").Expanded(true).Children(
        X.Node()
            .NodeID("ndGadgetTracker")
            .Text("Gadget Tracker")
            .Leaf(true)
            .CustomAttributes(c => { c.Add(new ConfigItem("url", Url.Action("create", "gadgettracker", null, "http"))); }),
    )
)
.DirectEvents(tpde =>
{
    tpde.Select.Url = Url.Action("create", "gadgettracker");
})

So, is there a way to make a directevents in a node?

Thanks before.

Daniil Veriga Daniil Veriga · Accepted Answer · 2013-07-05T04:40:56

The direct answer on your question is no way to attach DirectEvents direct to nodes.

But using a TreePanel's Select event is really what you need. You can modify a DirectEvent's Url within its Before handler.

tpde.Select.Url = Url.Action("create", "gadgettracker");
tpde.Select.Before = "o.url = record.get('url');" // "record" is a selected node

Using direct events on specific node for ext.net treepanel

1 Answers