PDA

View Full Version : [CLOSED] Overriden events..



Akpenob
Apr 09, 2014, 7:44 AM
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

Akpenob
Apr 09, 2014, 1:21 PM
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

Daniil
Apr 09, 2014, 6:48 PM
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");
});
}
});