PDA

View Full Version : container x and y having no effect



strivingtoward
4 Dec 2009, 10:05 AM
I want control over positioning an image within a region of a viewport. I have used Container/autoEl for the image and it displays in the upper left hand corner of the viewport's "center" region just fine.

So now I would like to position the image somewhere specific. But adding x and y coordinates to the Container's config options is having no effect.

Below are the relevant code snippets, thanks in advance:


center = new Ext.Panel({
id:'panel_center',
region: 'center',
border: false,
items: [
new Ext.Container({
autoEl : {
tag : 'img',
src : '/i/ebay_rightnow.gif'
},
x: 500,
y: 500
})
]
});

viewport = new Ext.Viewport({
layout:'border',
items:[north, center, south]
});

CrazyEnigma
4 Dec 2009, 10:17 AM
You might need to specify the layout type of your panel.

Try:


layout: 'absolute',


If you want to have full control of your containers.

strivingtoward
4 Dec 2009, 10:37 AM
Thanks that worked perfectly. I thought I needed to specify a layout but had missed "absolute" and had been trying "anchor", "fit" etcetera without success.

Animal
4 Dec 2009, 10:57 AM
You need new Ext.BoxComponent

You are not going to be containing any Components in that component which has an img as its element.

strivingtoward
4 Dec 2009, 11:20 AM
You need new Ext.BoxComponent

You are not going to be containing any Components in that component which has an img as its element.

I did see BoxComponent in the documentation. I strictly want a container for the image and nothing else; all I want to do is absolutely position the image within the center panel. Do you still think I need a BoxComponent?

Animal
4 Dec 2009, 11:52 AM
Of course.

As I said, that image component is not going to contain anything. It is just to be able to be a box.

CrazyEnigma
4 Dec 2009, 12:18 PM
I think what Animal is trying to say is:

Because Container inherits BoxComponent, you don't need as much additional functionality that Container has, so why not use Box Component instead.

BoxComponent is the super class of Container.

Container: Containers handle the basic behavior of containing items, namely adding, inserting and removing items.

BoxComponent: BoxComponent provides automatic box model adjustments for sizing and positioning and will work correctly within the Component rendering model.

So, if you are going to add more stuff to the container, then container is the right choice.

strivingtoward
4 Dec 2009, 12:20 PM
Of course.

As I said, that image component is not going to contain anything. It is just to be able to be a box.

Ok, I think I get it. Container extends BoxComponent, so BoxComponent is even simpler.

Animal
4 Dec 2009, 12:23 PM
zackly!