[CLOSED] Custom event in custom tree panel not being generated

[anup]

Hi,

I am sure I am missing something really obvious but just can't seem to see it.

I have been using a custom tree panel and the code needed to set that up is quite nice and simple. As the next step, I want to raise a custom event (client side, using .addEvents and .fireEvents etc). As a standalone JavaScript object extending tree panel that seems fine, but I want to expose it via Ext.Net listeners.

I've been following advice from these two posts about create custom events:

http://forums.ext.net/showthread.php...ol-extra-event
http://forums.ext.net/showthread.php?10401

I see for now I have to create a custom listeners object (I have a suggestion to overcome this which I will create in a separate post).

The problem I am having is that the although Visual Studio recognizes the custom listeners when it is generating the JavaScript, the custom listener is not coming through.

Example:

1. The custom listeners with one custom event

public class CustomListeners : TreePanelListeners
{
    private ComponentListener _myCustomEvent;

    
[ListenerArgument(0, "node")]
    
[ListenerArgument(1, "e")]
    [TypeConverter(typeof(ExpandableObjectConverter))]
    [ConfigOption("myCustomEvent", typeof(ListenerJsonConverter))]
    [PersistenceMode(PersistenceMode.InnerProperty)]
    [NotifyParentProperty(true)]
    [Description("Fires whenever...!")]
    public virtual ComponentListener MyCustomEvent
    {
        get { return _myCustomEvent ?? (_myCustomEvent = new ComponentListener()); }
    }
}

2. My custom tree panel

public class MyCustomTree : TreePanel
{
    public override string XType { get { return "Ext.ux.MyCustomTreePanel"; } }
    public override string InstanceOf { get { return "Ext.ux.MyCustomTreePanel"; } }

    private CustomListeners _customListeners;

    [ConfigOption("listeners", JsonMode.Object)]
    [Category("2. Observable")]
    [NotifyParentProperty(true)]
    [PersistenceMode(PersistenceMode.InnerProperty)]
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
    [ViewStateMember]
    [Description("Client-side JavaScript Event Handlers, specific to this CustomTree")]
    public CustomListeners CustomListeners
    {
        get { return _customListeners ?? (_customListeners = new CustomListeners()); }
    }

    // Courtesy of http://forums.ext.net/showthread.php?12416-CLOSED-Custom-control-extra-event
    [Browsable(false)]
    [EditorBrowsable(EditorBrowsableState.Never)]
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
    [XmlIgnore]
    [JsonIgnore]
    public override ConfigOptionsCollection ConfigOptions
    {
        get
        {
            ConfigOptionsCollection list = base.ConfigOptions;

            list.Add("customListeners", new ConfigOption("customListeners", new SerializationOptions("listeners", JsonMode.Object), null, CustomListeners));

            return list;
        }
    }
}

3. My custom tree panel JavaScript:

Ext.ux.MyCustomTreePanel = Ext.extend(Ext.net.TreePanel, {
    initComponent: function() {
        Ext.ux.MyCustomTreePanel.superclass.initComponent.apply(this, arguments);

        this.addEvents('myCustomEvent');
        this.on("click", this.onClick);
    },

    onClick: function(node, e) {
        // Silly example, but just to demonstrate raising custom event at some point
        this.fireEvent('myCustomEvent', node, this);
    }
});

Ext.reg('Ext.ux.MyCustomTreePanel', Ext.ux.MyCustomTreePanel);

4. Example usage:

<custom:MyCustomTree ID="CustomTree1" runat="server" Title="Tree" AutoHeight="true" Border="false">
    <Root>
        <ext:TreeNode NodeID="100" Text="Root" Expanded="true">
            <Nodes>
                <ext:TreeNode Text="Node1" />
                <ext:TreeNode Text="Node2" />
            </Nodes>
        </ext:TreeNode>
    </Root>
    <CustomListeners>
        <MyCustomEvent Handler="console.log('myCustomEvent', arguments);" />
    </CustomListeners>
</custom:MyCustomTree>

5. What viewsource of page with custom tree looks like (pretty printed)

new Ext.ux.MyCustomTreePanel({
    id: "CustomTree1",
    renderTo: "CustomTree1_Container",
    autoHeight: true,
    border: false,
    title: "Tree",
    nodes: [{
        id: "100",
        expanded: true,
        text: "Root",
        children: [{
            text: "Node1"
        }, {
            text: "Node2"
        }]
    }]
});

Problem: I don't see the listeners configuration in the generated JavaScript.

It feels like I missing something really obvious?

[Daniil]

Hi @anup,

You should also override the ConfigOptions of the CustomListeners class.

Example

public class CustomListeners : TreePanelListeners
{
    private ComponentListener _myCustomEvent;

    
[ListenerArgument(0, "node")]
    
[ListenerArgument(1, "e")]
    [TypeConverter(typeof(ExpandableObjectConverter))]
    [ConfigOption("myCustomEvent", typeof(ListenerJsonConverter))]
    [PersistenceMode(PersistenceMode.InnerProperty)]
    [NotifyParentProperty(true)]
    [Description("Fires whenever...!")]
    public virtual ComponentListener MyCustomEvent
    {
        get { return _myCustomEvent ?? (_myCustomEvent = new ComponentListener()); }
    }

    [Browsable(false)]
    [EditorBrowsable(EditorBrowsableState.Never)]
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
    [XmlIgnore]
    [JsonIgnore]
    public override ConfigOptionsCollection ConfigOptions
    {
        get
        {
            ConfigOptionsCollection list = base.ConfigOptions;
            list.Add("myCustomEvent", new ConfigOption("myCustomEvent", new SerializationOptions("myCustomEvent", typeof(ListenerJsonConverter)), null, this.MyCustomEvent));

            return list;
        }
    }
}

[anup]

Awesome. So many thanks for such a quick response! Wasn't expecting a reply until some time in the new year :)

That worked. I didn't see that in the previous posts, but makes sense now.

[Daniil]

I didn't see that in the previous posts

I can't see as well. Well, I think I should extend the Vladimir's post with that important detail.

[anup]

I can't see as well. Well, I think I should extend the Vladimir's post with that important detail.

That's a good idea.

[Daniil]

Done:
http://forums.ext.net/showthread.php...ll=1#post50813

Thanks for the question!