Mar 06, 2014, 5:03 PM
"Magnify" a panel inside a window : how to ?
Hi,
i have a web app with several panels. Some have grids, others have graphs, text or whatever. On small screens some panels are small, and this is normal. However, i would like to let the user "magnify" any panel and show it in a full screen window.
here is a simplified exampe; code (i do this from code behind) :
1. when we click the "plus" button, the content of the panel is now inside the window : OK... but it is gone from the window : is there anyway we can crete a "clone" of the object so that a copy is inside the window, but original content does not disapear from the original panel ?
2. other issue : the demo grid should fit all the window (fitlayout) : why doesn't it ?
Here are screenshots for better understanding :
Thanks for your help !
i have a web app with several panels. Some have grids, others have graphs, text or whatever. On small screens some panels are small, and this is normal. However, i would like to let the user "magnify" any panel and show it in a full screen window.
here is a simplified exampe; code (i do this from code behind) :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<script runat="server">
public List<object> Data
{
get
{
string[] produits = new string[]
{
"3m Co",
"Alcoa Inc",
"Altria Group Inc",
"American Express Company",
"American International Group, Inc.",
"AT&T Inc.",
"Boeing Co.",
"Caterpillar Inc.",
"Citigroup, Inc.",
"E.I. du Pont de Nemours and Company",
"Exxon Mobil Corp"
};
Random rand = new Random();
List<object> data = new List<object>(produits.Length);
for (int i = 0; i < produits.Length; i++)
{
data.Add(new
{
produit = produits[i],
CAHT = rand.Next(10000) / 100d,
NbVentes = rand.Next(10000) / 100d,
NbUnites = rand.Next(10000) / 100d,
MargeBrute = rand.Next(10000) / 100d,
CATTC = rand.Next(10000) / 100d,
});
}
return data;
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<script>
var fullscr = function (event, toolEl, panel) {
var win = Ext.create('Ext.window.Window',
{
title: panel.title,
height: Ext.getBody().getViewSize().height * 0.75,
width: Ext.getBody().getViewSize().width * 0.75,
// items: [this.up().up()],
layout: 'fit',
animateTarget: toolEl,
modal: true,
closeAction: 'destroy',
}
);
Ext.apply(win, { items: panel.up().items });
win.show();
};
</script>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Panel runat="server" Title="My test" Header="true" Collapsible="true" Height="600" Width="400">
<Tools>
<ext:Tool Type ="Plus" Fn = "fullscr" ID="ctl33"/>
</Tools>
<Bin>
<ext:Store
ID="CompanyStore"
runat="server"
Data="<%# Data %>"
AutoDataBind="true">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="produit" Mapping="produit" />
<ext:ModelField Name="CAHT" Mapping="CAHT" Type="Float" />
<ext:ModelField Name="NbVentes" Mapping="NbVentes" Type="Float" />
<ext:ModelField Name="NbUnites" Mapping="NbUnites" Type="Float" />
<ext:ModelField Name="MargeBrute" Mapping="MargeBrute" Type="Float" />
<ext:ModelField Name="CATTC" Mapping="CATTC" Type="Float" />
<ext:ModelField Name="cumul" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Bin>
<Items>
<ext:GridPanel
Layout="FitLayout"
ID="CompanyGrid"
runat="server"
Flex="1"
Header="false"
StoreID="CompanyStore">
<ColumnModel>
<Columns>
<ext:Column
ID="Company"
runat="server"
Text="Produit"
Flex="1"
DataIndex="produit" />
<ext:Column ID="Column1"
runat="server"
Text="CAHT"
DataIndex="CAHT"
flex="1"
Align="Right">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column ID="Column2"
runat="server"
Text="NbVentes"
DataIndex="NbVentes"
flex="1"
Align="Right">
</ext:Column>
<ext:Column ID="Column3"
runat="server"
Text="NbUnites"
flex="1"
DataIndex="NbUnites"
Align="Right">
</ext:Column>
<ext:Column ID="Column4"
runat="server"
Text="MargeBrute"
flex="1"
DataIndex="MargeBrute"
Align="Right">
</ext:Column>
<ext:Column ID="Column5"
runat="server"
Text="CATTC"
flex="1"
DataIndex="CATTC"
Align="Right">
</ext:Column>
<ext:Column ID="Column6"
runat="server"
Text="cumul"
flex="1"
DataIndex="cumul"
Align="Right">
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</form>
</body>
</html>1. when we click the "plus" button, the content of the panel is now inside the window : OK... but it is gone from the window : is there anyway we can crete a "clone" of the object so that a copy is inside the window, but original content does not disapear from the original panel ?
2. other issue : the demo grid should fit all the window (fitlayout) : why doesn't it ?
Here are screenshots for better understanding :
Thanks for your help !
Last edited by brunweb; Mar 06, 2014 at 5:05 PM.
Originally Posted by brunweb
