PDA

View Full Version : event handler gets wrong parameters from TreePanel / Subtle mistake / Hello



MickeyG
5 Aug 2010, 6:46 PM
I'm a 5-day ExtJs newbie and I made a strange mistake, but once I discovered what I'd done wrong, I realized that someone else might find this post and get a much needed answer.

I'm using Ext Designer since I'm not fleuent in the config parameters. It generates 2 files for my main Viewport-derived window - SiteMaster.ui.js and SiteMaster.js. Because of this, I am attaching an event handler to a component after its creation, instead of through the listeners: ... config option, as I found in almost all examples I found.

AdminX.SiteMaster = Ext.extend(AdminX.SiteMasterUi, {
initComponent: function () {
AdminX.SiteMaster.superclass.initComponent.call(this);
this.on('afterrender', function () {
Ext.get('ToolsTreePanel').addListener('click', function (node) {
Ext.Msg.alert('Click', 'You clicked on ' + node.attributes.text);
})
...

Ext.get() returns the Element and not the component, so the handler was attached to the click event of the Component's containing Element. I got the click event - from the DOM element. Is this a common mistake?
The fix is to use Ext.getCmp() or what I used, this.get().

Hello everyone. Glad to be here with my first posting.

-Michael

Condor
5 Aug 2010, 11:51 PM
1. Why are you adding the click listener in the afterrender event? You can add it directly in initComponent!
2. Ext.get() returns an Ext.Element and Ext.getCmp an Ext.Component (and a TreePanel is a Component).
3. It's unneeded code (as mentioned in #1), but you should have solved this by specifying the scope, e.g.

this.on('afterrender', function () {
this.addListener('click', function (node) {
Ext.Msg.alert('Click', 'You clicked on ' + node.attributes.text);
}
}, this);

MickeyG
6 Aug 2010, 5:56 AM
1. Why are you adding the click listener in the afterrender event? You can add it directly in initComponent!
2. Ext.get() returns an Ext.Element and Ext.getCmp an Ext.Component (and a TreePanel is a Component).
3. It's unneeded code (as mentioned in #1), but you should have solved this by specifying the scope, e.g.

this.on('afterrender', function () {
this.addListener('click', function (node) {
Ext.Msg.alert('Click', 'You clicked on ' + node.attributes.text);
}
}, this);
#2. Yes, I said that myself in my post. My newbie mistake.
#3. Wrong. Your example adds a listener to the Viewport-derived class. My code is adding a listener to a component contained inside that class.
#1. Show me instead of telling me what I ought to have done (with an exclamation point, no less!:)).

class SiteMasterUI derived from Viewport (created by Ext Designer - I cannot manually edit this class - AutoGenerated and subject to overwriting):
AdminX.SiteMasterUi = Ext.extend(Ext.Viewport, {
layout: 'border',
initComponent: function() {
this.items = [
{
xtype: 'treepanel',
region: 'west', ...,
id: 'ToolTreePanel', ... } ....
];
...

class SiteMaster derived from SiteMasterUI (initially created by Ext Designer as a starting point for my code):
AdminX.SiteMaster = Ext.extend(AdminX.SiteMasterUi, {
initComponent: function () {
AdminX.SiteMaster.superclass.initComponent.call(this);
}
});

To affect the nested config of of the treepanel, I'd .... ? search the items array for the object with id 'ToolTreePanel' and modify it directly? Sounds messy to me, but there is a distinct style to Ext coding that hasn't sunk into me yet.