Apr 02, 2014, 5:19 PM
[CLOSED] How to set Height on application with dynamic content?
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:
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> 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
});
Last edited by Daniil; Apr 04, 2014 at 8:05 PM.
Reason: [CLOSED]
