PDA

View Full Version : resize panel according to its html content



korenanzo
2 Jul 2012, 7:50 AM
Hi all,
is it possible to resize a panel according to its html content?
For example:

...


Ext.define('WdR2.view.MyViewport', {
extend: 'Ext.container.Viewport',


layout: {
type: 'border'
},


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'panel',
height: 456,
id: 'panelA',
title: 'My Panel',
flex: 1,
region: 'north'
},
{
xtype: 'panel',
id: 'panelB',
title: 'My Panel',
flex: 1,
region: 'center',
split: true
}
]
});


me.callParent(arguments);
}


});


...
at runtime, programmaticaly, I have something like:
Ext.getCmp('panelA').upload(someHtmlString)


I'd like that:
IF the htmlstring is a littelpiece of html, the height of panelA should be *short*;
vice versa if htmlstring contains a long piece of html, panelA should extend itself , stealing pixels to panelB.

thanks, Rik

scottmartin
2 Jul 2012, 1:09 PM
You will have to determine the content and use panel.setHeight()/setWidth() to make the changes as needed.

Scott.

korenanzo
2 Jul 2012, 2:00 PM
The HTML content is dynamic (it can change in any time); how can I determine its size after the rendering?

Thanks,
Rik

scottmartin
2 Jul 2012, 2:14 PM
When you gather your html using .upload(someHtmlString).. you can then check the size and use one of the methods... unless I am missing something?

Scott.

korenanzo
2 Jul 2012, 10:27 PM
When you gather your html using .upload(someHtmlString).. you can then check the size and use one of the methods... unless I am missing something?

Scott.

maybe I do missing something :)

after .update() , what should I do to get the size of the rendered html?

scottmartin
3 Jul 2012, 7:45 AM
Since I only see snippets of your code, I am not sure how you are gathering your html string.
Can you check check the length after is comes across the wire?
(ie: string.length)

Scott.

korenanzo
3 Jul 2012, 11:02 PM
This is a complete example:
there are two panels, the second one contains two buttons, each button writes some html into the first panel, using also css styling. after rendered the html, what must I do to see all the text rendered into the first panel?





Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {

layout: {
type: 'border'
},
items: [
{
xtype: 'panel',
id:'pp',
height: 150,
title: 'North Panel',
split: true,

region: 'north'
},
{
xtype: 'panel',
title: 'Center',
region: 'center',
split: true,
items: [
{
xtype: 'button',
text: 'Small',
listeners: {
click: {
fn:function() {
var s='<P>a small piece of html.</p> how high will it be, after the render?';
Ext.getCmp('pp').update(s);

}

}
}
},
{
xtype: 'button',
text: 'big',
listeners: {
click: {
fn:function() {
var s='<P style=" margin: 20px;">a Long piece of html.</p><p><b>how high will it be, after the render?</b> <P style=" margin: 20px;">a Long piece of html.</p> <P style=" margin: 20px;">a Long piece of html.</p> <P>a Long piece of html.</p> ';
Ext.getCmp('pp').update(s);

}

}
}
}
]
}
]




});


});

Animal
4 Jul 2012, 1:56 AM
Remove the height configuration if you want it to shrinkwrap content.

Otherwise it will do what you tell it and always be 150px high!

korenanzo
4 Jul 2012, 7:29 AM
Remove the height configuration if you want it to shrinkwrap content.

Otherwise it will do what you tell it and always be 150px high!

oh, that's nice !
I'd never noticed that, even because if you have split:true and you move the splitting bar, it stops to work !!!

so, the solution should be:
1) remove the height: parameter,as you said;
2) add something like

Ext.getCmp('pp').height=null; before the pp.update()


thanks :)

RIc