PDA

View Full Version : Making a panel grow when it's contents change



darrenb
20 Jul 2010, 11:59 PM
Hi,
I have a parent panel which contains a number of stacked-up children panels and buttons. Each child panel displays some text by settings it's html. The html is essentially made up of div's, spans, small images and text.

As the user interacts with the site, the text in any one of the childen panels grows in length, however it seems that the panel doesn't expand with the text. If I refresh the page, the panel grows and the text fits perfectly, further the other panels and buttons around it shift accordingly.

Is there a method I can call to force the child panel to render itself again? Will this cause the other panels and objects to shift their position, or do i have make the parent panel render itself again?

Thanks,
Darren

evant
21 Jul 2010, 1:42 AM
Difficult to say without seeing any code, perhaps you could put together a small example that shows what you mean.

darrenb
21 Jul 2010, 3:08 AM
Hi,
Thanks for the quick response.

I've simplified the code, which is pretty straight forward. There are 4 buttons and after each one is a panel, which shows some selections.

When the first button is clicked, the panel below's html is updated with some longer text. When you execute this, you'll see that the text updates in the first panel, but doesn't show all the text as it's fallen outside. Also the other buttons and panels below don't shift.

I've also included the styles that are being applied to them.

Incidentally, is there a better way than using Ext.getCmp to get a handle on another object to then manipulate it?

Thanks,
Darren.


// styles
.btn
{
width:233px;
text-align: left;
height: 45px;
font-size:1.2em;
color:White;
margin:10px auto 0px auto;
}

.currentSelections
{
background-color:white;
padding: 5px 15px 15px 15px;
width:213px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
margin:0px auto 0px auto;
}


//the parent panel and it's children
var leftPanelCtl = new Ext.Panel({
height: 600,
scroll: 'vertical',
items: [{
xtype: 'button',
html: '<div style=\'float:left;\'>Region</div><div style=\'float:right;\'>></div>',
cls: 'btn',
handler: function() {
Ext.getCmp('test1').update('hello, this is some really, really, really, really, really long text'); }
}, {
id: 'test1',
xtype: 'panel',
hidden: false,
cls: 'currentSelections',
html: '<div>my selections...</div>'
}, {
xtype: 'button',
html: '<div style=\'float:left;\'>Country (2)</div><div style=\'float:right;\'>></div>',
cls: 'btn',
}, {
xtype: 'panel',
hidden: true,
cls: 'currentSelections',
html: '<div></div>'
}, {
xtype: 'button',
html: '<div style=\'float:left;\'>Product</div><div style=\'float:right;\'>></div>',
cls: 'btn'
}, {
xtype: 'panel',
hidden: false,
cls: 'currentSelections',
html: '<div>this is html, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah...</div>'
}, {
xtype: 'button',
html: '<div style=\'float:left;\'>Year</div><div style=\'float:right;\'>></div>',
cls: 'btn'
}, {
xtype: 'panel',
hidden: true,
cls: 'currentSelections',
html: '<div></div>'
}]
});

evant
21 Jul 2010, 3:46 AM
It's not going to grow, because you given it an explicit height.

darrenb
21 Jul 2010, 4:00 AM
The only heights i'm setting are on the buttons, whose html doesn't change and the parent panel. I'm not setting a height on the actual panel's that are having their htmls updated, can't quite see how they should affect it.

I've taken the height off the parent and i'm still getting the same behaviour.

evant
21 Jul 2010, 4:04 AM
height: 600 // <-- this


So no matter what content you add to the panels, they're going to keep growing. I'm still not really clear, just from that sample.

Basically you're saying after you update a panel with arbitrary content, it doesn't modify it's height?

darrenb
21 Jul 2010, 4:17 AM
Hi,
Yeah. The height of 600 which is set to the parent (outer) panel makes it 2-3 times taller than it's contents (the buttons and child panels) need, so i can't see why it'll affect it.

In the example code on pressing the first button the first child panel (which starts off with the text 'my selections') is 'updated' to make it's text longer. It's height doesn't change and so the text falls outside.

I was wondering if there was something i could call to force it to render itself again.

evant
21 Jul 2010, 4:27 AM
Switch to a component:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
var leftPanelCtl = new Ext.Panel({
height: 600,
scroll: 'vertical',
items: [{
xtype: 'button',
html: '<div style=\'float:left;\'>Region</div><div style=\'float:right;\'>></div>',
cls: 'btn',
handler: function(){
var s = [];
for(var i = 0; i < 10; ++i){
s.push('hello, this is some really, really, really, really, really long text');
}
Ext.getCmp('test1').update(s.join(' '));
}
}, {
id: 'test1',
xtype: 'component',
cls: 'currentSelections',
html: '<div>my selections...</div>'
}, {
xtype: 'button',
html: '<div style=\'float:left;\'>Country (2)</div><div style=\'float:right;\'>></div>',
cls: 'btn',
}, {
xtype: 'panel',
hidden: true,
cls: 'currentSelections',
html: '<div></div>'
}, {
xtype: 'button',
html: '<div style=\'float:left;\'>Product</div><div style=\'float:right;\'>></div>',
cls: 'btn'
}, {
xtype: 'panel',
hidden: false,
cls: 'currentSelections',
html: '<div>this is html, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah...</div>'
}, {
xtype: 'button',
html: '<div style=\'float:left;\'>Year</div><div style=\'float:right;\'>></div>',
cls: 'btn'
}, {
xtype: 'panel',
hidden: true,
cls: 'currentSelections',
html: '<div></div>'
}]
}).show();
}
});

darrenb
21 Jul 2010, 4:52 AM
Awesome!

Thanks for all your help!

darrenb
23 Jul 2010, 12:05 AM
Hi,
I'm having an issue again with growing component :(

It works fine when i just update it with basic html, i.e.

Ext.getCmp('test').update(<div>close</div><div>some really long text which gets longer and longer as i do things elsewhere, blah, blah, blah</div>
But, if i add some floating styles to the divs, like so

Ext.getCmp('test').update(<div \'style=float:left;width:60px;\'>clear</div><div \'style=float:right;width:160px;\'>some really long text which gets longer and longer as i do things elsewhere, blah, blah, blah</div>
The height of the component doesn't expand.

The reason why i want to do this is because to the left of the growing text i want the user to click 'clear' and clear their selections, which are shown to the right in a neat block. Without the floats, the rights side text wraps underneath the 'close'.