PDA

View Full Version : Element.fitToParent(true) causes error if element is removed



snid
30 Mar 2007, 12:04 PM
I'm creating an element and calling fitToParent(true) on it. Later on, I remove the element using remove(). After that, if the window is resized I get the following error message:

p has no properties
yui-ext/1.0a3/ext-all-debug.js Line 3298

I don't think I have a handle to the delegate function, or I'd remove the handler when Iremove the element.

It's not causing any operational problems, just causing an error to show up in the console.

Perhaps modify fitToParent() to check if p==null? Not sure what fitToParent should return / do to clean things up at that point though.

ethraza
12 Jul 2007, 12:28 AM
I'm having the same issue.
I'm setting fitToParent on Tabiten's bodyEl and when I remove the tab, the 'p has no properties' starts to pop up.
I'll try to find a way to remove the fitToParent 'beforeclose' the tab. But, at least to me, seens logical that if an element is removed, their fitToParent event need to go away too.

mystix
12 Jul 2007, 12:29 AM
http://extjs.com/forum/showthread.php?t=8887

ethraza
12 Jul 2007, 12:50 AM
Hi mystix, sorry if I have not be so clear, I'll try to be more specific.

This is my initialize tab and addTab function:


centertabs = new Ext.TabPanel('centertabs', {
resizeTabs:true,
minTabWidth: 100
});
Ext.EventManager.onWindowResize(function(){centertabs.syncHeight(Ext.get(layout.regions.center.el).getHeight())});


addTab : function(sTitle,sContent,sParams,sId){
if (!sId) { sId = Ext.id() }
if (!Ext.get(sId)) {
var obj = centertabs.addTab(sId, sTitle, sContent, true);
obj.setUrl(sContent,sParams,true).loadScripts = true;
centertabs.syncHeight(Ext.get(layout.regions.center.el).getHeight());
obj.bodyEl.fitToParent(true);
obj.on('beforeclose',function(el,e){alert(el.id+' removido')});
obj.activate();
return obj;
}else{
centertabs.activate(sId);
}
},
How you can see in my addTab, in obj.bodyEl.fitToParent(true), I'm setting it to get the tab's body resized together with the screen resize.

But after I remove the tab from the TabPanel, clicking on X on tab to close it, when the window resizes I got the error
p has no properties
(function(){var D=Ext.lib.Dom;var E=Ext.lib.Event;var A=Ext.lib.Anim;var _4={};v...
in firebug, that points to line 20 of ext-all.js (minified).

I think that when a element does not exists anymore, their fitToParent event need to be removed too. It is not happening, at least in 1.1-Beta2.
It is a bug?

And their is a way to remove it on 'beforeclose' the tab?
I think that subscribe to that event is the right path, but I don't konw how to remove this event seted by fitToParent.

Thanks for any help!

ethraza
12 Jul 2007, 1:23 AM
Here is the p that is having trouble!!! It is the fitToParent function from Element.js:


fitToParent : function(monitorResize, targetParent){
var p = Ext.get(targetParent || this.dom.parentNode);
this.setSize(p.getComputedWidth()-p.getFrameWidth('lr'), p.getComputedHeight()-p.getFrameWidth('tb'));
if(monitorResize === true){
Ext.EventManager.onWindowResize(this.fitToParent.createDelegate(this, []));
}
return this;
},
How can we stop this delegation that is created when true is used?

mystix
12 Jul 2007, 2:09 AM
:((

1. pls use ext-all-debug.js, not ext-all.js
2. are you using Ext 1.1 RC1?

ethraza
12 Jul 2007, 2:36 AM
Now is official, all 1.1 version have this bug, including rc1.
I can use ext-all-debug.js if you think that it will give more detail that I'm already revelated in my last post.
I'm not a javascript master, the truth is really far from that, but I think that the response to that problem is one of that:

1- Jack add some test with this p (maybe: if (!p) return; )
var p = Ext.get(targetParent || this.dom.parentNode); (I probably will be forced to do that if no good answers come from this forum)

2- Jack add a listener to the element that gains the fitToParent delegation that removes that delegation when the element is destroyed.

3- Somebody tell me how to remove the fitToParent(true) from an element, so I can remove it before to destroy the element my self.
I searched a lot and it is out of my code powers to discovery how.

Thanks for the attention!

mystix
12 Jul 2007, 7:38 AM
try this in your overrides file
Ext.override(Ext.Element, {
// private
fitToParentDelegate : Ext.emptyFn, // keep a reference to the fitToParent delegate

fitToParent : function(monitorResize, targetParent) {
Ext.EventManager.removeResizeListener(this.fitToParentDelegate); // always remove previous listener
this.fitToParentDelegate = Ext.emptyFn; // remove reference to previous delegate
if (monitorResize === true && !this.dom.parentNode) { // check if this Element still exists
return;
}
var p = Ext.get(targetParent || this.dom.parentNode);
this.setSize(p.getComputedWidth() - p.getFrameWidth('lr'), p.getComputedHeight() - p.getFrameWidth('tb'));
if (monitorResize === true) {
this.fitToParentDelegate = this.fitToParent.createDelegate(this, [true, targetParent]);
Ext.EventManager.onWindowResize(this.fitToParentDelegate);
}
return this;
}
});and let me know if you encounter any more problems.

[edit 1]
updated the code (fixed some bugs)

[edit 2]
updated the code (fixed more bugs)

[edit 3]
finalised

ethraza
12 Jul 2007, 8:28 AM
Thanks!
I'll try tonight (I work by night - GMT+3) and will let you know immediately.

ethraza
12 Jul 2007, 6:58 PM
Hey man... it worked!!!
The 'p has no properties' has gone away!

It need to be in 1.1 final.
If you want me to test another version of that mod, please say. I will do in the same night.

Thanks!

jack.slocum
12 Jul 2007, 7:27 PM
This function is a shortcut function and was not designed for use with adding and removing elements.

Take a look at the logic - it is very short and it should be pretty simple to create a custom version that suits your needs.

If you really need fitting with adding and removing, why not use a layout? That is what it does.

ethraza
12 Jul 2007, 7:38 PM
Are you saying that if I stop to use TabPanel and start to add tabs of ContentPanel to the layout, when I remove a tab the fitToParent (if exists) will gone away with the ContentPanel tab?

If yes, I will do the change, because I get a little problem with this override by Mystix. When a error occurs in javascript (they don't have to occur, but...), the Tab is killed, but the body remains on the layout, and the fitToParent event too.

I'm knocking with my head on keyboard right now! It's makes me get 3 years old in 3 weeks. :((

jack.slocum
12 Jul 2007, 7:52 PM
Yes, you can render a layout anywhere. Using just a center panel with alwaysShowTabs:true, you get the tabs and with a ContentPanel option fitToFrame you can get built in fitting.

ethraza
12 Jul 2007, 8:16 PM
Thank you Jack for the lesson.
I need to admit that I started to use TabPanel inside ContentPanel because of my completely low knowledge about EXTjs. But I think that now I'm some steps forward. I'm learning EXTjs with this project.

I will change my addTab function to open the new pages in a new tab of center layout and forgot the TabPanel thing.


Mystix:
Thank you for trying to help with the 'p has no properties'.
Do you have sure that is not more easy to test
(!p) Ext.EventManager.removeResizeListener(this.fitToParentDelegate);
or something more simple like that!
Any way I'll do what Jack said.


ps. I'm convincing my boss to pay for the support. It is really needed and all of you do it very well. Not to mention that EXTjs is wonderful.


Thanks!

mystix
12 Jul 2007, 8:32 PM
Mystix:
Thank you for trying to help with the 'p has no properties'.

np :)



Do you have sure that is not more easy to test
(!p) Ext.EventManager.removeResizeListener(this.fitToParentDelegate);
or something more simple like that!i'm actually checking if fitToParent was previously called on the Ext.Element. if it was, i remove the previous handler from the window resize listener before adding a new handler for the newly designated parent element.

[edit 1]
the hack above was written when i was about to I-|
let me think about it some more...

[edit 2]
fixed the override above for Ext.Element. pls try it again and let me know if u have any problems.

as for the automated TabPanel with fitting, jack's recommendation is definitely the way to go ;)

[edit 3]
tinkered, found some more bugs, fixed the code above.

ethraza
13 Jul 2007, 4:19 AM
Hi!
I have changed my function that adds tabs from using TabPanel to add new ContentPanels it is working almost flawless.

Only one thing:
At least in IE7, when I close a tab (contentPanel) that has a page with an element with fitToParent seted and resize the screen, IE gives the error 'null' is null or is not an object. It keeps working, but givin that error silent.
FF works ok.


Mystix:
I'll try your new override and let you know.