[CLOSED] Overriden events..

  1. #1

    [CLOSED] Overriden events..

    Hello support

    I was wondering
    When you have made and default override on a component event like the select event,
    why the event wont be fired if you have attached another listener but on a different event...

    below is at test site to demo what i mean.

    To get the result i am taking about do the following..

    Leave the listener that are comment out as it is for now and the override gets fired on selecting a node and the checkchange as well,
    Now remove the comment, click a node again, this time the overriden select event will not get fired, but offcause the checkchange will when you click the checkbox with is what i want to happen.

    My intension was to trigger the checkchange through the override of the select event, but as it is now, i would have to make another listener for the select to handle that insted of the override..

    Any reason to why this is the case..

    <!DOCTYPE html>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="Panel=Ext.Net.Panel" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
    
            var methods = {};
    
            methods.checkchange = function (item, checked) {
                var parent = item.parentNode;
                var cou = 0;
                for (var i = 0, child; child = parent.childNodes[i]; i++) {
                    if (child.data.checked)
                        cou++;
                    if (child.hasChildNodes()) {
                        methods.GetRecursiveResult(cou, child);
                    }
                }
    
                if (cou == 0)
                    parent.set("text", parent.raw.text);
                else {
                    var selected = " {'0'} ";
                    parent.set("text", parent.raw.text + selected.replace("'0'", cou));
                }
            };
    
            methods.GetRecursiveResult = function (cou, node) {
                var parent = node;
                for (var i = 0, child; child = parent.childNodes[i]; i++) {
                    if (child.data.checked)
                        cou++;
                    if (child.hasChildNodes()) {
                        methods.GetRecursiveResult(cou, child);
                    }
                }
            }
    
            Ext.override(Ext.tree.TreePanel, {
                listeners: {
                    select: function (tree, record) {
                        var evtOjb = Ext.EventObject;
                        if (!evtOjb.getTarget('.x-tree-checkbox', 1, true)) {
                            if (record.data.checked != null) {
                                record.set("checked", !record.data.checked);
                                this.fireEvent("checkchange", record, !record.data.checked);
                            }
                        }
                    },
                    checkchange: function (record, checked) {
                        var test = "";
                    }
                }
            });
        </script>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" ViewStateMode="Disabled"
            EnableViewState="false" />
            <ext:Window ID="wnd" runat="server" Width="800" Height="600" Layout="FitLayout">
                <Items>
                     <ext:TreePanel
                         runat="server" 
                         ID="tree" 
                         RootVisible="false"
                         Animate ="false">
                         <Root>
                             <ext:Node NodeID="root" Expanded ="true">
                                 <Children>
                                     <ext:Node NodeID="node1" Icon="None" Text="node1">
                                         <Children>
                                             <ext:Node NodeID="node1_1" Checked="false" Leaf="true" Text="node1_1"></ext:Node>
                                             <ext:Node NodeID="node1_2" Checked="false" Leaf="true" Text="node1_2"></ext:Node>
                                             <ext:Node NodeID="node1_3" Checked="false" Leaf="true" Text="node1_3"></ext:Node>
                                             <ext:Node NodeID="node1_4" Checked="false" Leaf="true" Text="node1_4"></ext:Node>
                                         </Children>
                                     </ext:Node>
                                      <ext:Node NodeID="node2" Icon="None" Text="node2" Leaf="false">
                                          <Children>
                                             <ext:Node NodeID="node2_1" Checked="false" Leaf="true" Text="node1_1"></ext:Node>
                                             <ext:Node NodeID="node2_2" Checked="false" Leaf="true" Text="node2_2"></ext:Node>
                                             <ext:Node NodeID="node2_3" Checked="false" Leaf="true" Text="node2_3"></ext:Node>
                                             <ext:Node NodeID="node2_4" Checked="false" Leaf="true" Text="node2_4"></ext:Node>
                                         </Children>
                                      </ext:Node>
                                 </Children>
                             </ext:Node>
                         </Root>
                         <View>
                             <ext:TreeView ID="treeView" runat="server" MarkDirty="false" TrackOver="true">
                             </ext:TreeView>
                         </View>
                       <%--
                           <Listeners>
                             <CheckChange Handler="methods.checkchange(item,checked)"></CheckChange> /* THIS CAUSES THE OVERRIDE TO BE IGNORED */
                         </Listeners>
                        --%>
                     </ext:TreePanel>
                  </Items>
                </ext:Window>
        </form>
    </body>
    </html>
    Best Regards

    Akpenob
    Last edited by Daniil; Apr 15, 2014 at 11:20 PM. Reason: [CLOSED]
  2. #2
    Update...

    I have found the solution to my problem...

    it seems when you defined the override, it will not take effect into the object its self if that has some listneres defined on it,
    you have to handle the attachment of the listeners that are defined in the prototype..

    One way of doing this is by overriding the initComponent like so:

     Ext.override(Ext.tree.TreePanel, {
                initComponent:function(){
                    if (Object.getPrototypeOf) {
                        var proto = Object.getPrototypeOf(this);
                        for (var pKey in proto.listeners) {
                            var found = false;
                            for (var lKey in this.listeners) {
                                if (lKey === pKey) {
                                    found = true;
                                    break;
                                }
                            }
                            if (!found) {
                                this.mon(this, pKey, proto.listeners[pKey], this);
                            }
                        }
                    }
                    else {
                        var proto = Ext.tree.TreePanel.prototype; // THIS IS ONLY IN USE IF IE IS BELOW 9
                        for (var pKey in proto.listeners) {
                            var found = false;
                            for (var lKey in this.listeners) {
                                if (lKey === pKey) {
                                    found = true;
                                    break;
                                }
                            }
                            if (!found) {
                                this.mon(this, pKey, proto.listeners[pKey], this);
                            }
                        }
                    }
                    this.callOverridden();
                },
                listeners: {
                    select: function (tree, record) {
                        var evtOjb = Ext.EventObject;
                        if (!evtOjb.getTarget('.x-tree-checkbox', 1, true)) {
                            if (record.data.checked != null) {
                                record.set("checked", !record.data.checked);
                                this.fireEvent("checkchange", record, !record.data.checked);
                            }
                        }
                    },
                }
            });
    What the function does is comparing "this" listeners with the "base" {prototype} listeners of the tree and adding the listeners that are not found in "this"
    by doing this override you are gurrantied that your overriden methods gets attach to this...

    Best regards
    Akpenob
    Last edited by Akpenob; Apr 09, 2014 at 1:38 PM.
  3. #3
    Hi @Akpenob,

    Also you can do the following:
    Ext.override(Ext.tree.TreePanel, {
        initComponent: function() {
            this.listeners = Ext.apply(this.listeners || {}, {
                select: function (tree, record) {
                    console.log("select");
                },
                checkchange: function (record, checked) {
                        console.log("checkchange");
                }
            });
    
            this.callParent(arguments);
        }
    });
    Though, this
    <CheckChange Handler="..." />
    will override the "checkchange" in the initComponent. The "select" listener will still work.

    By the "listeners" config option it is possible to define the only listener for some event. If you need more listeners for some event, please use the "on", "mon", "addListener" methods.

    Like this:
    Ext.override(Ext.tree.TreePanel, {
        initComponent: function() {
            this.callParent(arguments);
    
            this.on("select", function (tree, record) {
                console.log("select");
            });
    
            this.on("checkchange", function (tree, record) {
                console.log("checkchange");
            });
        }
    });

Similar Threads

  1. Replies: 2
    Last Post: Apr 11, 2013, 9:31 PM
  2. [CLOSED] overriden Value of TextField is not updating on client
    By pk.net in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 27, 2012, 12:11 PM
  3. Replies: 15
    Last Post: Feb 03, 2011, 1:27 PM
  4. Store events
    By slavyanin in forum 1.x Help
    Replies: 0
    Last Post: Aug 23, 2010, 3:20 PM
  5. Notification Events...
    By state in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 31, 2009, 12:25 PM

Tags for this Thread

Posting Permissions