ThierryC
04-19-2010, 10:29 AM
Hi,
In my program, based on the selection of the graph-type a users selects, it should show or 1 graph, or a dashboard containing 6 pies. (2rows of each 3 cols)
I've tried modifying the predelivered valence-'card' example into something that looks similar.
In the example, i've changed panel 2 into something that should look like i want to, except that the height of the rows are not equally stretched over the size of the window.
i've tried several combinations with setting height: 'auto', autoHeight:'true' but none with success.
is it possible to have a layout like that?
could someone please put me on the right track?
thx
enclosed is the code of the slightly modified 'card'-example
i've changed panel 2 into the table layaut... widht of the cell is ok, but the height isn't
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Copyright" content="Copyright © 2008-2009 CNX Corporation, All Rights Reserved">
<title>Valence Examples - Layouts - Card Layout</title>
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/vvresources/valence.css" />
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript" src="/vvresources/valence.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var w1 = new Ext.Window({
title:'Card Layout',
iconCls:'layout_content',
height: 300,
width: 300,
x: 150,
y: 150,
layout: 'card',
activeItem: 0,
items:[{
title: 'Panel 1',
html: 'Step 1 of 3'
},{
title: 'Panel 2',
xtype: 'panel',
layout: 'table',
layoutConfig: {columns: 3,
tableAttrs: {style: {width:'100%'}}},
items:[
{html: '1', flex: 1},
{html: '2', flex: 1},
{html: '3', flex: 1},
{html: '4', flex: 1},
{html: '5', flex: 1},
{html: '6', flex: 1}
]
}, {
title:'Panel 3',
html: 'Step 3 of 3'
}],
bbar:[{
text:'Next Step',
iconCls:'switch',
handler: function(){
var activeCard = w1.layout.activeItem;
var activeIndex= w1.items.indexOf(activeCard);
var numCards = w1.items.getCount()-1; // remember, JavaScript arrays start with element 0
if (activeIndex<numCards){
w1.layout.setActiveItem(activeIndex+1);
} else {
w1.layout.setActiveItem(0);
};
}
}]
});
w1.show();
});
</script>
</head>
<body>
<table border="0" style="font-family:helvetica,tahoma,verdana,sans-serif;font-size:16px;font-weight:bold;margin-left:10px;">
<tr>
<td><br>Card Layout Example</td>
</tr>
<tr>
<td style="font-family:helvetica,tahoma,verdana,sans-serif;font-size:12px;font-weight:normal;padding-top:5px;width:600px;">
This example demonstrates the use of the card layout. The card layout is a descendant of the fit layout, it will ensure that the child (a panel in this case)
conforms to the size of the container (a window in this case). However, the card layout may have multiple children under its control, but may only show one at a time.
<br>
<br>
The front-end code for this example can be found at ../html/examples/layouts/card.html. No back-end program exists.
</td>
</tr>
</table>
</body>
</html>
i'm trying to (based on the delivered example 'card'
In my program, based on the selection of the graph-type a users selects, it should show or 1 graph, or a dashboard containing 6 pies. (2rows of each 3 cols)
I've tried modifying the predelivered valence-'card' example into something that looks similar.
In the example, i've changed panel 2 into something that should look like i want to, except that the height of the rows are not equally stretched over the size of the window.
i've tried several combinations with setting height: 'auto', autoHeight:'true' but none with success.
is it possible to have a layout like that?
could someone please put me on the right track?
thx
enclosed is the code of the slightly modified 'card'-example
i've changed panel 2 into the table layaut... widht of the cell is ok, but the height isn't
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Copyright" content="Copyright © 2008-2009 CNX Corporation, All Rights Reserved">
<title>Valence Examples - Layouts - Card Layout</title>
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/vvresources/valence.css" />
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript" src="/vvresources/valence.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var w1 = new Ext.Window({
title:'Card Layout',
iconCls:'layout_content',
height: 300,
width: 300,
x: 150,
y: 150,
layout: 'card',
activeItem: 0,
items:[{
title: 'Panel 1',
html: 'Step 1 of 3'
},{
title: 'Panel 2',
xtype: 'panel',
layout: 'table',
layoutConfig: {columns: 3,
tableAttrs: {style: {width:'100%'}}},
items:[
{html: '1', flex: 1},
{html: '2', flex: 1},
{html: '3', flex: 1},
{html: '4', flex: 1},
{html: '5', flex: 1},
{html: '6', flex: 1}
]
}, {
title:'Panel 3',
html: 'Step 3 of 3'
}],
bbar:[{
text:'Next Step',
iconCls:'switch',
handler: function(){
var activeCard = w1.layout.activeItem;
var activeIndex= w1.items.indexOf(activeCard);
var numCards = w1.items.getCount()-1; // remember, JavaScript arrays start with element 0
if (activeIndex<numCards){
w1.layout.setActiveItem(activeIndex+1);
} else {
w1.layout.setActiveItem(0);
};
}
}]
});
w1.show();
});
</script>
</head>
<body>
<table border="0" style="font-family:helvetica,tahoma,verdana,sans-serif;font-size:16px;font-weight:bold;margin-left:10px;">
<tr>
<td><br>Card Layout Example</td>
</tr>
<tr>
<td style="font-family:helvetica,tahoma,verdana,sans-serif;font-size:12px;font-weight:normal;padding-top:5px;width:600px;">
This example demonstrates the use of the card layout. The card layout is a descendant of the fit layout, it will ensure that the child (a panel in this case)
conforms to the size of the container (a window in this case). However, the card layout may have multiple children under its control, but may only show one at a time.
<br>
<br>
The front-end code for this example can be found at ../html/examples/layouts/card.html. No back-end program exists.
</td>
</tr>
</table>
</body>
</html>
i'm trying to (based on the delivered example 'card'