PDA

View Full Version : Ext.Resizable Problems [ExtJS 3.0]



systemlevel
4 Dec 2009, 1:55 AM
I am trying to use Ext.Resizable but get the following error in firebug:



this.el is null
anonymous("ext-comp-1001", Object wrap=true pinned=true minWidth=50 minHeight=50)ext-all-debug.js (line 35197)
anonymous()skstudio.js (line 288)
h(Object browserEvent=Object button=0 type=mouseout)ext-all-debug.js (line 2463)
anonymous(Object originalEvent=Event click type=click)jquery-1....2.min.js (line 19)
anonymous()jquery-1....2.min.js (line 19)
chrome://firebug/content/blank.gif this.el = this.el.wrap(typeof co...onfig.wrap : {cls:'xresizable-wrap'});\r\next-all-debug.js (line 35197)

Here is what I am doing:

I'm using the Ext.ux.Image extension which extends BoxComponent (http://extjs.com/forum/showthread.php?p=286538)


var testimage = new Ext.ux.Image({src: '/skpets/images/portfolio_image.jpg'});The testimage successfuly displays in a tabpanel:



var tabs = new Ext.TabPanel({
region: 'center',
id: 'editPanel',
//margins:'0 0 0 0',
activeTab: 0,
defaults:{autoScroll:true},

items:[{
title: 'Bogus Tab',
items: [testimage]
}]
});I then pass the element id that is generated for testimage and pass it into Ext.Resizable:



var custom = new Ext.Resizable('ext-comp-1001', {
wrap:true,
pinned:true,
minWidth:50,
minHeight: 50,
preserveRatio: true,
dynamic:true,
handles: 'all', // shorthand for 'n s e w ne nw se sw'
draggable:true
});

Instead of it transforming into a resizable image I am getting this.el is null.

I appreciate your help!

Animal
4 Dec 2009, 2:25 AM
You hardcoded an ID into that?

And does an element of that ID exist at the time that statement executes?

systemlevel
4 Dec 2009, 2:41 AM
No, originally I did not. You are looking at a debugging version where I did hardcode it in and still no luck.

What is the best approach to checking if the ID exists before it gets executed?

For example, I did a
testimage.getId() and it returns the id.

I can't figure this out... can I not have the image resizable functionality in a panel?

Not sure what to do here...

Thanks for your help,

D

Animal
4 Dec 2009, 2:42 AM
The ELEMENT must exist.

That means the Component must have been rendered.

Use the render event.

systemlevel
4 Dec 2009, 2:55 AM
You're saying to render the testimage?

I tried that by .render() before passing it off to the Ext.Resizable but I get the same issue.

Maybe I am misunderstanding what you are saying.

I also tried doing the Ext.Resizable after the panel was display in the window after the .show() event when everything was displayed on the screen (even the image was showing) but it still won't transform into a Resizable.

Thanks for your help if I am misunderstanding please let me know.

Animal
4 Dec 2009, 3:04 AM
NO. Just listen for the render event.

You know that YOU do not render Components.

systemlevel
4 Dec 2009, 3:12 AM
Right that makes sense. I think I understand what you are referring to... could you throw up some sample code in the context of the first post in the thread. Just making sure I am understanding what and where

Thanks again,

D

Animal
4 Dec 2009, 3:30 AM
Show your code.

I don't want to write your code, you'll never learn that way.

systemlevel
4 Dec 2009, 4:39 PM
Well this is what I was understanding from your the short comments was to do something like this:



var testimage = new Ext.ux.Image({src: '/skpets/images/portfolio_image.jpg'});
var testid = testimage.getId();

testimage.on('render', function(){ var custom = new Ext.Resizable(testid, {
wrap:true,
pinned:true,
minWidth:50,
minHeight: 50,
preserveRatio: true,
dynamic:true,
handles: 'all', // shorthand for 'n s e w ne nw se sw'
draggable:true
}) });

To only attempt to do an Ext.Resizable after the testimage was rendered. (maybe that isn't what my code is doing).

That didn't work I still get the same error. Not sure where to go from here.

Thanks,

D

systemlevel
5 Dec 2009, 12:26 AM
I think I am misunderstanding what to do here... Does anyone know if the example I gave is what Animal is referring to?

Animal
5 Dec 2009, 12:44 AM
That looks OK.

Now you have to debug. How does the null get passed that causes that error? Break there, and go back through the call stack to see who passed it.

Animal
5 Dec 2009, 12:45 AM
Of course I don't know if that particular UX follows the convention that its ID is the same as the ID of its element.

You should call getEl() on it and create the resizer from that.