PDA

View Full Version : Can't change panel height in a viewport



lpastor
30 Oct 2009, 4:37 PM
Hello,

I don't understand why, when I use my buttons width is changed, but not the height ?



Ext.onReady(function() {

var viewport = new Ext.Viewport({
layout: 'absolute',
items: [{
id:'pnl',
xtype:'panel',
layout:'fit',
x: 500,
y: 100,
border:false,
html:'<h1>Very good</h1>',
//html:'<img src="Essai.png" border="0">',
//width:50,
width:'auto',
//height:50
height:'auto'
},
{xtype:'button',text:'size 100',x:100,y:100,handler: function() {
Ext.getCmp('pnl').el.setWidth('100');
Ext.getCmp('pnl').el.setHeight('100');
}},
{xtype:'button',text:'size 300',x:100,y:130,handler: function() {
Ext.getCmp('pnl').el.setWidth('300');
Ext.getCmp('pnl').el.setHeight('300');
}}
]
});

});

Jaitsu
30 Oct 2009, 4:51 PM
autoHeight: true on your panel...

try reading the api documentation

lpastor
31 Oct 2009, 10:04 AM
Thank you Jaisu,

I tried all combinations with autoHeight:true or false - height:50 or 'auto' nothing change...

The height retains its original size.

Laurent

Animal
31 Oct 2009, 10:12 AM
Do not get the el.

Set the size of the Component.

But anyway. Layout: 'absolute'? Is that useful at all?

lpastor
31 Oct 2009, 2:01 PM
Thank you a lot Animal,

That's solved, without el element :


Ext.getCmp('pnl').setWidth(100);
Ext.getCmp('pnl').setHeight(100);

or


Ext.getCmp('pnl').setSize({width:100, height:100});


But now I have an other problem, only width animation work :




Ext.getCmp('pnl').el.setWidth(400, {
duration: 2,
easing: 'bounceIn',
scope: this
});
Ext.getCmp('pnl').el.setHeight(400, {
duration: 2,
easing: 'bounceIn',
scope: this
});


and to do the animation, I need el !?

Animal
31 Oct 2009, 2:11 PM
"Ext.getCmp('pnl').el"

No.

lpastor
31 Oct 2009, 2:41 PM
I have the same result, I add doLayout too, but it's not better.

If we do first : pnl.setWidth(100); and pnl.setHeight(100); the animation of the second button don't do nothing after !


Ext.onReady(function() {

var pnl = new Ext.Panel({
id:'pnl',
layout:'fit',
x: 600,
y: 100,
border:false,
html:'<h1>Very good</h1>',
width:50,
height:50
//height:'auto'
});

var viewport = new Ext.Viewport({
id:'viewport',
layout: 'absolute',
autoHeight:true,
items: [pnl,
{xtype:'button',text:'size 100',x:100,y:100,handler: function() {
pnl.setWidth(100);
pnl.setHeight(100);
}},
{xtype:'button',text:'size 300',x:100,y:130,handler: function() {
pnl.el.setWidth(400, {
duration: 2,
easing: 'bounceIn',
scope: this
});
pnl.el.setHeight(400, {
duration: 2,
easing: 'bounceIn',
scope: this
});
pnl.doLayout();
viewport.doLayout();
}}
]
});

});

Animal
31 Oct 2009, 2:45 PM
Coz you can't just fart about with DOM elements behind the back of the Ext Component system.

To manipulate a Component, you must use Component methods.

And if there isn't one to do what you want, you have to write one. Which performs the necessary processing.

To set the height of a BoxComponent, call setHeight on it. Do not mess with its Element.

lpastor
31 Oct 2009, 3:07 PM
What is unfortunate is that the animation works for the width but not for the height.

It is curious that no one seen this before ?

Animal, you write : "To set the height of a BoxComponent, call setHeight", but read my code, what I am doing ....