Nov 24, 2011, 1:56 PM
[CLOSED] Page layout in IFrame and resize issue
Hi:
I am trying to load a chart from ExtJs 4 in Ext.Net
I have a panel as IFrame to load a page.
1. In the javascript file, how could I set the panel's width and height based on the value from the panel which has IFrame?
2. I set the layout value of panel with chart to "Fit" but there is still some white space in the panel. To maximum use of the page space, how could I fill in the page with chart?
3. If I resize the browser, how could I let the chart to be resize as well?
Sorry about many questions, Thank you
I am trying to load a chart from ExtJs 4 in Ext.Net
I have a panel as IFrame to load a page.
<ext:Panel ID="Panel2" runat="server" Height="250">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server" Layout="Container">
<Items>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:ComboBox ID="ComboBoxItemType" runat="server" SelectedIndex="0" Editable="false">
<Items>
<ext:ListItem Text="<%$Resources: Strings, CoreTaskWorkIn%>" Value="ct" />
<ext:ListItem Text="<%$Resources: Strings, DivertedTasks%>" Value="dt" />
<ext:ListItem Text="<%$Resources: Strings, Downtimes%>" Value="dn" />
<ext:ListItem Text="<%$Resources: Strings, Resources%>" Value="rs" />
<ext:ListItem Text="<%$Resources: Strings, Productivity%>" Value="pr" />
</Items>
<Listeners>
<Select Fn="forecast.taskTypeItemChange" Delay="100"></Select>
</Listeners>
</ext:ComboBox>
<ext:ComboBox ID="ComboBoxItemList" runat="server" SelectedIndex="0" Editable="false"
StoreID="StoreTaskItemList" DisplayField="Name" ValueField="Id">
<Listeners>
<Select Fn="forecast.taskItemChange" Delay="100"></Select>
</Listeners>
</ext:ComboBox>
<ext:Button ID="BtnNext" runat="server" Text="<%$Resources: Strings, Next%>" StandOut="true"
Icon="NextGreen">
<Listeners>
<Click Fn="forecast.nextButtonClick"></Click>
</Listeners>
</ext:Button>
<ext:ToolbarFill runat="server" />
<ext:RadioGroup ID="RadioGroupTrend" runat="server" Width="300">
<Items>
<ext:Radio runat="server" ID="PlanUnitTrend" BoxLabel="<%$Resources: Strings, PlanUnitTrend%>">
</ext:Radio>
<ext:Radio runat="server" ID="Trend" BoxLabel="<%$Resources: Strings, Trend%>" Checked="true">
</ext:Radio>
</Items>
<Listeners>
<Change Fn="forecast.chartTrendChange" Delay="1"></Change>
</Listeners>
</ext:RadioGroup>
<ext:ComboBox ID="ComboBoxGraphUnit" runat="server" Editable="false" SelectedIndex="0"
StoreID="StorePlanRange" DisplayField="Name" ValueField="PlanRangeId" TriggerAction="All">
</ext:ComboBox>
</Items>
</ext:Toolbar>
</Items>
</ext:Toolbar>
</TopBar>
<AutoLoad Url="~/Planning/Forecast/Chart" Mode="IFrame" ShowMask="true" NoCache="true" PassParentSize="true">
</AutoLoad>
</ext:Panel><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Line Chart</title>
<script type="text/javascript" src="../../Scripts/ExtJs4/ext-all.js" />
<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true,
disableCaching: true,
paths: { 'Ext': "/Scripts/ExtJs4/src/" }
});
</script>
<link rel="stylesheet" type="text/css" href="../../../../Scripts/ExtJs4/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../../../Scripts/ExtJs4/example.css" />
<script type="text/javascript" src="../../Scripts/ExtJs4/example-data.js"></script>
<script type="text/javascript" src="../../Scripts/ExtJs4/Line.js"></script>
</head>
<body id="docbody">
</body>
</html>Ext.require('Ext.chart.*');
Ext.require(['Ext.Panel', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
Ext.onReady(function () {
store1.loadData(generateData(8));
var win = Ext.create('Ext.Panel', {
width: 800,
height: 600,
hidden: false,
border: true,
renderTo: Ext.getBody(),
layout: 'fit',
items: {
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: store1,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['data1', 'data2', 'data3'],
title: 'Number of Hits',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['name']
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'data1',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'name',
yField: 'data2',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
fill: true,
xField: 'name',
yField: 'data3',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}]
}
});
});1. In the javascript file, how could I set the panel's width and height based on the value from the panel which has IFrame?
2. I set the layout value of panel with chart to "Fit" but there is still some white space in the panel. To maximum use of the page space, how could I fill in the page with chart?
3. If I resize the browser, how could I let the chart to be resize as well?
Sorry about many questions, Thank you
Last edited by Daniil; Nov 25, 2011 at 8:50 AM.
Reason: [CLOSED]
Originally Posted by Daniil
