PDA

View Full Version : [CLOSED] How to set Height on application with dynamic content?



supera
Apr 02, 2014, 6:19 PM
This is the problem:

In my application, I have panels with fixed sizes, however I have a panel (BodyContent) which change the content according to user action and its content comes from a database.
My doubt is, how can I manually to set the height of my main form according to the contents of this BodyContent, or how can I make it automatically adjusted. considering that in its internal content can be panels, as may have a DataView, and how this content is database size will be set according to the size and number of records returned in the query.

This is an example:



<%@ Page Language="vb" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<style type="text/css">

</style>

<script type="text/javascript" >

Ext.onReady(function () {

Ext.create('Ext.panel.Panel', {
width: 500,
height: 500,
title: 'Border Layout',
layout: 'border',
autoScroll: true,
items: [{
title: 'Center Region',
flex: 1,
id: 'center',
region: 'center',
xtype: 'panel',
layout: 'border',
margins: '5 5 0 0',
items: [{
title: 'CenterEast Region',
region: 'east',
xtype: 'panel',
layout: 'border',
width: 100,
height: 200,
margins: '5 5 0 0'
}, {
title: 'BodyContent',
region: 'center',
id: 'bodypanel',
xtype: 'panel',
layout: 'border',
margins: '5 5 0 0'
}]
}, {
title: 'Footer',
region: 'south',
xtype: 'panel',
margins: '5 0 0 5',
flex: 0,
id: 'footer',
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start',
},
items: [{
title: '1',
height: 50
}, {
title: '2',
height: 50
}]
}],
renderTo: Ext.getBody()
});

Ext.getCmp('footer').add({
title: '3',
height: 50
});

Ext.getCmp('bodypanel').add({
xtype: 'panel',
title: 'test bodyHeight: ' + Ext.getCmp('bodypanel').getHeight(),
region: 'north',
height: 100
});
Ext.getCmp('bodypanel').add({
xtype: 'panel',
title: 'test1 bodyHeight: ' + Ext.getCmp('bodypanel').getHeight(),
region: 'north',
height: 200
});
Ext.getCmp('bodypanel').add({
xtype: 'panel',
title: 'test2 bodyHeight: ' + Ext.getCmp('bodypanel').getHeight(),
region: 'north',
height: 300
});

});

</script>

</head>
<body>
<ext:ResourceManager ID="resManagerSGE" runat="server" Theme="Default" />
<form id="form1" runat="server">
<div>

</div>
</form>
</body>
</html>


in this case the "dynamic" content is:



Ext.getCmp('bodypanel').add({
xtype: 'panel',
title: 'test bodyHeight: ' + Ext.getCmp('bodypanel').getHeight(),
region: 'north',
height: 100
});
Ext.getCmp('bodypanel').add({
xtype: 'panel',
title: 'test1 bodyHeight: ' + Ext.getCmp('bodypanel').getHeight(),
region: 'north',
height: 200
});
Ext.getCmp('bodypanel').add({
xtype: 'panel',
title: 'test2 bodyHeight: ' + Ext.getCmp('bodypanel').getHeight(),
region: 'north',
height: 300
});


Thank you in advance

Daniil
Apr 03, 2014, 4:01 AM
Hi @supera,

It looks we discussed quite a similar requirement here:
http://forums.ext.net/showthread.php?28050

No? Anyway, a similar solution is going to work in this case as well.

supera
Apr 03, 2014, 12:08 PM

Daniil
Apr 03, 2014, 3:21 PM
Sorry, I don't quite understand. You already calculate it in this way:

var westItems = App.PanelWest.items,
height = westItems.getAt(0).getHeight() +
westItems.getAt(1).getHeight() +
westItems.getAt(2).getHeight() +
westItems.getAt(3).getHeight();

App.ViewportConsole.setHeight(height + 49);

So, should you not re-calculate it in the same way?

supera
Apr 03, 2014, 6:31 PM
Using this way of example really would work in this case:


Ext.getCmp('bodypanel').add({
xtype: 'panel',
title: 'test bodyHeight: ' + Ext.getCmp('bodypanel').getHeight(),
region: 'north',
height: 100
});
Ext.getCmp('bodypanel').add({
xtype: 'panel',
title: 'test1 bodyHeight: ' + Ext.getCmp('bodypanel').getHeight(),
region: 'north',
height: 200
});
Ext.getCmp('bodypanel').add({
xtype: 'panel',
title: 'test2 bodyHeight: ' + Ext.getCmp('bodypanel').getHeight(),
region: 'north',
height: 300
});

But I need a more generic way, because in my BodyPanel content can have for example a DataView with a dynamic content:


<%@ Page Language="vb" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<style type="text/css">

</style>

<script type="text/javascript" >

Ext.onReady(function () {

Ext.create('Ext.panel.Panel', {
width: 500,
height: 500,
title: 'Border Layout',
layout: 'border',
autoScroll: true,
items: [{
title: 'Center Region',
flex: 1,
id: 'center',
region: 'center',
xtype: 'panel',
layout: 'border',
margins: '5 5 0 0',
items: [{
title: 'CenterEast Region',
region: 'east',
xtype: 'panel',
layout: 'border',
width: 100,
height: 200,
margins: '5 5 0 0'
}, {
title: 'BodyContent',
region: 'center',
id: 'bodypanel',
xtype: 'panel',
layout: 'border',
margins: '5 5 0 0',
items: [
{
itemId: 'dtViewTest',
xtype: 'dataview',
store: {
storeId: 'facilitadorStore',
idIndex: 0,
fields: ['TEST'],
data: [
{ TEST: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tempus sapien in dignissim. Suspendisse odio elit, adipiscing in sem vel, eleifend porta erat. Maecenas erat eros, rhoncus luctus accumsan bibendum, tincidunt sed justo. Ut faucibus iaculis rutrum. Nulla felis odio, fringilla vestibulum risus feugiat, consequat blandit mauris. Phasellus et molestie neque. Duis fermentum vitae turpis non laoreet. Aliquam lectus diam, eleifend nec feugiat ac, tincidunt ut magna.' }
]
},
tpl: [
'<tpl for=".">',
'<div id="panelist"><br>Test: <br>{TEST}</div>',
'</tpl>',
'<div class="x-clear"></div>'
],
itemSelector: 'div.thumb - wrap',
emptyText: '',
autoHeight: true,
multiSelect: true,
autoScroll: false,
scrollable: false,
flex: 0
}
]
}]
}, {
title: 'Footer',
region: 'south',
xtype: 'panel',
margins: '5 0 0 5',
flex: 0,
id: 'footer',
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start',
},
items: [{
title: '1',
height: 50
}, {
title: '2',
height: 50
}]
}],
renderTo: Ext.getBody(),
listeners: {
afterrender: {
fn: function () {
Ext.getCmp('bodypanel').setTitle(Ext.getCmp('bodyp anel').title + ' Height: ' + Ext.getCmp('bodypanel').getHeight() + ' Y: ' + Ext.getCmp('bodypanel').getY());
}
}
}
});

Ext.getCmp('footer').add({
title: '3',
height: 50
});

//Ext.getCmp('bodypanel').add({
// xtype: 'panel',
// title: 'test bodyHeight: ' + Ext.getCmp('bodypanel').getHeight(),
// region: 'north',
// height: 100
//});
//Ext.getCmp('bodypanel').add({
// xtype: 'panel',
// title: 'test1 bodyHeight: ' + Ext.getCmp('bodypanel').getHeight(),
// region: 'north',
// height: 200
//});
//Ext.getCmp('bodypanel').add({
// xtype: 'panel',
// title: 'test2 bodyHeight: ' + Ext.getCmp('bodypanel').getHeight(),
// region: 'north',
// height: 300
//});

});

</script>

</head>
<body>
<ext:ResourceManager ID="resManagerSGE" runat="server" Theme="Default" />
<form id="form1" runat="server">
<div>

</div>
</form>
</body>
</html>


Both in a DataView with a single record as a DataView with multiple content, the height of the panel remains unchanged, and thus can not calculate the correct height.

I create one listener for get height of panel on after render and set in title of panel:


listeners: {
afterrender: {
fn: function () {
Ext.getCmp('bodypanel').setTitle(Ext.getCmp('bodyp anel').title + ' Height: ' + Ext.getCmp('bodypanel').getHeight() + ' Y: ' + Ext.getCmp('bodypanel').getY());
}
}
}

one:


{
itemId: 'dtViewTest',
xtype: 'dataview',
store: {
storeId: 'facilitadorStore',
idIndex: 0,
fields: ['TEST'],
data: [
{ TEST: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tempus sapien in dignissim. Suspendisse odio elit, adipiscing in sem vel, eleifend porta erat. Maecenas erat eros, rhoncus luctus accumsan bibendum, tincidunt sed justo. Ut faucibus iaculis rutrum. Nulla felis odio, fringilla vestibulum risus feugiat, consequat blandit mauris. Phasellus et molestie neque. Duis fermentum vitae turpis non laoreet. Aliquam lectus diam, eleifend nec feugiat ac, tincidunt ut magna.' }
]
},
tpl: [
'<tpl for=".">',
'<div id="panelist"><br>Test: <br>{TEST}</div>',
'</tpl>',
'<div class="x-clear"></div>'
],
itemSelector: 'div.thumb - wrap',
emptyText: '',
autoHeight: true,
multiSelect: true,
autoScroll: false,
scrollable: false,
flex: 0
}

9281

multiple:


{
itemId: 'dtViewTest',
xtype: 'dataview',
store: {
storeId: 'facilitadorStore',
idIndex: 0,
fields: ['TEST'],
data: [
{ TEST: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tempus sapien in dignissim. Suspendisse odio elit, adipiscing in sem vel, eleifend porta erat. Maecenas erat eros, rhoncus luctus accumsan bibendum, tincidunt sed justo. Ut faucibus iaculis rutrum. Nulla felis odio, fringilla vestibulum risus feugiat, consequat blandit mauris. Phasellus et molestie neque. Duis fermentum vitae turpis non laoreet. Aliquam lectus diam, eleifend nec feugiat ac, tincidunt ut magna.' },
{ TEST: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tempus sapien in dignissim. Suspendisse odio elit, adipiscing in sem vel, eleifend porta erat. Maecenas erat eros, rhoncus luctus accumsan bibendum, tincidunt sed justo. Ut faucibus iaculis rutrum. Nulla felis odio, fringilla vestibulum risus feugiat, consequat blandit mauris. Phasellus et molestie neque. Duis fermentum vitae turpis non laoreet. Aliquam lectus diam, eleifend nec feugiat ac, tincidunt ut magna.' },
{ TEST: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tempus sapien in dignissim. Suspendisse odio elit, adipiscing in sem vel, eleifend porta erat. Maecenas erat eros, rhoncus luctus accumsan bibendum, tincidunt sed justo. Ut faucibus iaculis rutrum. Nulla felis odio, fringilla vestibulum risus feugiat, consequat blandit mauris. Phasellus et molestie neque. Duis fermentum vitae turpis non laoreet. Aliquam lectus diam, eleifend nec feugiat ac, tincidunt ut magna.' },
{ TEST: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tempus sapien in dignissim. Suspendisse odio elit, adipiscing in sem vel, eleifend porta erat. Maecenas erat eros, rhoncus luctus accumsan bibendum, tincidunt sed justo. Ut faucibus iaculis rutrum. Nulla felis odio, fringilla vestibulum risus feugiat, consequat blandit mauris. Phasellus et molestie neque. Duis fermentum vitae turpis non laoreet. Aliquam lectus diam, eleifend nec feugiat ac, tincidunt ut magna.' },
{ TEST: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tempus sapien in dignissim. Suspendisse odio elit, adipiscing in sem vel, eleifend porta erat. Maecenas erat eros, rhoncus luctus accumsan bibendum, tincidunt sed justo. Ut faucibus iaculis rutrum. Nulla felis odio, fringilla vestibulum risus feugiat, consequat blandit mauris. Phasellus et molestie neque. Duis fermentum vitae turpis non laoreet. Aliquam lectus diam, eleifend nec feugiat ac, tincidunt ut magna.' },
{ TEST: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tempus sapien in dignissim. Suspendisse odio elit, adipiscing in sem vel, eleifend porta erat. Maecenas erat eros, rhoncus luctus accumsan bibendum, tincidunt sed justo. Ut faucibus iaculis rutrum. Nulla felis odio, fringilla vestibulum risus feugiat, consequat blandit mauris. Phasellus et molestie neque. Duis fermentum vitae turpis non laoreet. Aliquam lectus diam, eleifend nec feugiat ac, tincidunt ut magna.' },
{ TEST: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tempus sapien in dignissim. Suspendisse odio elit, adipiscing in sem vel, eleifend porta erat. Maecenas erat eros, rhoncus luctus accumsan bibendum, tincidunt sed justo. Ut faucibus iaculis rutrum. Nulla felis odio, fringilla vestibulum risus feugiat, consequat blandit mauris. Phasellus et molestie neque. Duis fermentum vitae turpis non laoreet. Aliquam lectus diam, eleifend nec feugiat ac, tincidunt ut magna.' },
{ TEST: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tempus sapien in dignissim. Suspendisse odio elit, adipiscing in sem vel, eleifend porta erat. Maecenas erat eros, rhoncus luctus accumsan bibendum, tincidunt sed justo. Ut faucibus iaculis rutrum. Nulla felis odio, fringilla vestibulum risus feugiat, consequat blandit mauris. Phasellus et molestie neque. Duis fermentum vitae turpis non laoreet. Aliquam lectus diam, eleifend nec feugiat ac, tincidunt ut magna.' }
]
},
tpl: [
'<tpl for=".">',
'<div id="panelist"><br>Test: <br>{TEST}</div>',
'</tpl>',
'<div class="x-clear"></div>'
],
itemSelector: 'div.thumb - wrap',
emptyText: '',
autoHeight: true,
multiSelect: true,
autoScroll: false,
scrollable: false,
flex: 0
}

9291

Thanks!

Daniil
Apr 04, 2014, 12:58 AM
For the "bodycontent" Panel you set this setting:

layout: 'border'

A BorderLayout manages the size of its child "dtViewTest". In particular, it sets its height. As you need to manage the height manually, you probably should not use any layout which manages height. So, please try to remove that layout setting. Then this

Ext.getCmp("bodypanel").items.get("dtViewTest").getHeight()
returns actual height.

supera
Apr 04, 2014, 12:15 PM
Hi Danill,

Unfortunately it did not work, I did as you suggested, I removed the border layout of 'bodypanel' but it is not even shown the actual height of both the panel and the dataview.



title: 'BodyContent',
region: 'center',
id: 'bodypanel',
xtype: 'panel',
margins: '5 5 0 0',
items: [
{
itemId: 'dtViewTest',
xtype: 'dataview',
store: {
storeId: 'facilitadorStore',
idIndex: 0,
fields: ['TEST'],
data: [
{ TEST: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tempus sapien in dignissim. Suspendisse odio elit, adipiscing in sem vel, eleifend porta erat. Maecenas erat eros, rhoncus luctus accumsan bibendum, tincidunt sed justo. Ut faucibus iaculis rutrum. Nulla felis odio, fringilla vestibulum risus feugiat, consequat blandit mauris. Phasellus et molestie neque. Duis fermentum vitae turpis non laoreet. Aliquam lectus diam, eleifend nec feugiat ac, tincidunt ut magna.' },
{ TEST: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tempus sapien in dignissim. Suspendisse odio elit, adipiscing in sem vel, eleifend porta erat. Maecenas erat eros, rhoncus luctus accumsan bibendum, tincidunt sed justo. Ut faucibus iaculis rutrum. Nulla felis odio, fringilla vestibulum risus feugiat, consequat blandit mauris. Phasellus et molestie neque. Duis fermentum vitae turpis non laoreet. Aliquam lectus diam, eleifend nec feugiat ac, tincidunt ut magna.' },
{ TEST: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tempus sapien in dignissim. Suspendisse odio elit, adipiscing in sem vel, eleifend porta erat. Maecenas erat eros, rhoncus luctus accumsan bibendum, tincidunt sed justo. Ut faucibus iaculis rutrum. Nulla felis odio, fringilla vestibulum risus feugiat, consequat blandit mauris. Phasellus et molestie neque. Duis fermentum vitae turpis non laoreet. Aliquam lectus diam, eleifend nec feugiat ac, tincidunt ut magna.' },
{ TEST: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tempus sapien in dignissim. Suspendisse odio elit, adipiscing in sem vel, eleifend porta erat. Maecenas erat eros, rhoncus luctus accumsan bibendum, tincidunt sed justo. Ut faucibus iaculis rutrum. Nulla felis odio, fringilla vestibulum risus feugiat, consequat blandit mauris. Phasellus et molestie neque. Duis fermentum vitae turpis non laoreet. Aliquam lectus diam, eleifend nec feugiat ac, tincidunt ut magna.' },
{ TEST: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tempus sapien in dignissim. Suspendisse odio elit, adipiscing in sem vel, eleifend porta erat. Maecenas erat eros, rhoncus luctus accumsan bibendum, tincidunt sed justo. Ut faucibus iaculis rutrum. Nulla felis odio, fringilla vestibulum risus feugiat, consequat blandit mauris. Phasellus et molestie neque. Duis fermentum vitae turpis non laoreet. Aliquam lectus diam, eleifend nec feugiat ac, tincidunt ut magna.' },
{ TEST: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tempus sapien in dignissim. Suspendisse odio elit, adipiscing in sem vel, eleifend porta erat. Maecenas erat eros, rhoncus luctus accumsan bibendum, tincidunt sed justo. Ut faucibus iaculis rutrum. Nulla felis odio, fringilla vestibulum risus feugiat, consequat blandit mauris. Phasellus et molestie neque. Duis fermentum vitae turpis non laoreet. Aliquam lectus diam, eleifend nec feugiat ac, tincidunt ut magna.' },
{ TEST: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tempus sapien in dignissim. Suspendisse odio elit, adipiscing in sem vel, eleifend porta erat. Maecenas erat eros, rhoncus luctus accumsan bibendum, tincidunt sed justo. Ut faucibus iaculis rutrum. Nulla felis odio, fringilla vestibulum risus feugiat, consequat blandit mauris. Phasellus et molestie neque. Duis fermentum vitae turpis non laoreet. Aliquam lectus diam, eleifend nec feugiat ac, tincidunt ut magna.' },
{ TEST: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique tempus sapien in dignissim. Suspendisse odio elit, adipiscing in sem vel, eleifend porta erat. Maecenas erat eros, rhoncus luctus accumsan bibendum, tincidunt sed justo. Ut faucibus iaculis rutrum. Nulla felis odio, fringilla vestibulum risus feugiat, consequat blandit mauris. Phasellus et molestie neque. Duis fermentum vitae turpis non laoreet. Aliquam lectus diam, eleifend nec feugiat ac, tincidunt ut magna.' }
]
},
tpl: [
'<tpl for=".">',
'<div id="panelist"><br>Test: <br>{TEST}</div>',
'</tpl>',
'<div class="x-clear"></div>'
],
itemSelector: 'div.thumb - wrap',
emptyText: '',
autoHeight: true,
multiSelect: true,
autoScroll: false,
scrollable: false,
flex: 0


listener of main panel:



listeners: {
afterrender: {
fn: function () {
Ext.getCmp('bodypanel').setTitle(Ext.getCmp('bodyp anel').title + ' BodyHeight: ' + Ext.getCmp('bodypanel').getHeight() + ' dtViewHeight: ' + Ext.getCmp('bodypanel').items.get('dtViewTest').ge tHeight());
}
}
}


9411

break on afterrender and use the imediate window for check height:

9421

Daniil
Apr 04, 2014, 5:39 PM
Please try

delay: 1
for the afterrender listener.

If it doesn't help, please provide a full test case you are testing with.

supera
Apr 04, 2014, 8:38 PM
Please try

delay: 1
for the afterrender listener.

If it doesn't help, please provide a full test case you are testing with.

Thanks for help Danill!

It?s Work!



listeners: {
afterrender: {
delay: 1,
fn: function () {
Ext.getCmp('bodypanel').setTitle(Ext.getCmp('bodyp anel').title + ' BodyHeight: ' + Ext.getCmp('bodypanel').getHeight() + ' dtViewHeight: ' + Ext.getCmp('bodypanel').items.get('dtViewTest').ge tHeight());
}
}
}


9451

supera
Jun 02, 2014, 12:25 PM
closed topic