Oct 09, 2012, 3:26 PM
Horizontal resize DashBoardPanel issue
Hi,
I have a problem with a DashBoardPanel because I can not resize it horizontal.
Here is my code:
I think I need to use the ViewPort but have not been able to find a solution.
Thank you!
Stefano Lonati
I have a problem with a DashBoardPanel because I can not resize it horizontal.
Here is my code:
<%@ Page Title="Eaton portal" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="DefaultPortal.aspx.cs" Inherits="WEB_CAR.DefaultPortal" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css">
div.item-wrap {
float : left;
border : 1px solid transparent;
margin : 5px 25px 5px 25px;
width : 100px;
cursor : pointer;
height : 120px;
text-align : center;
}
div.item-wrap img {
margin : 5px 0px 0px 5px;
width : 61px;
height : 77px;
}
div.item-wrap h6 {
font-size : 14px;
color : #3A4B5B;
font-family : tahoma,arial,san-serif;
}
div.x-view-over { border : solid 1px silver; }
#items-ct { padding : 0px 30px 24px 30px; }
#items-ct h2 {
border-bottom : 2px solid #3A4B5B;
cursor : pointer;
}
#items-ct h2 div {
background : transparent url(resources/EXT.NET/images/group-expand-sprite.gif) no-repeat 3px -47px;
padding : 4px 4px 4px 17px;
font-family : tahoma,arial,san-serif;
font-size : 12px;
color : #3A4B5B;
}
#items-ct .collapsed h2 div { background-position : 3px 3px; }
#items-ct dl { margin-left : 2px; }
#items-ct .collapsed dl { display : none; }
.sub-menu
{
margin : 20px 0px 0px 35px;
font-size: 2.1em;
font-weight: 500;
color: #4b6c9e;
}
</style>
<script type="text/javascript">
var itemClick = function (view, record, item, index, e) {
var group = e.getTarget("h2", 3, true);
if (group) {
group.up("div").toggleCls("collapsed");
return false;
}
var item = e.getTarget(".item-wrap");
if (item) {
window.location.href = item.id;
}
};
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<div class="main">
<ext:Panel ID="DashBoardPanel" runat="server" Cls="items-view" Layout="FitLayout" AutoHeight="true" Border="false" ManageHeight="False">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server" Flat="true">
<Items>
<ext:ToolbarFill />
<ext:Button ID="Button1" runat="server" Icon="BulletPlus" Text="Expand All">
<Listeners>
<Click Handler="#{Dashboard}.el.select('.group-header').removeCls('collapsed');" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Icon="BulletMinus" Text="Collapse All">
<Listeners>
<Click Handler="#{Dashboard}.el.select('.group-header').addCls('collapsed');" />
</Listeners>
</ext:Button>
<ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="30" />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:DataView ID="Dashboard" runat="server" SingleSelect="true" ItemSelector="div.group-header" AutoHeight="true" EmptyText="No items to display">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Title" />
<ext:ModelField Name="Items" IsComplex="true" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Tpl ID="Tpl1" runat="server">
<Html>
<div id="items-ct">
<tpl for=".">
<div class="group-header">
<h2><div>{Title}</div></h2>
<dl>
<tpl for="Items">
<div id="{Link}" class="item-wrap">
<img src="{Icon}" />
<div>
<H6>{Title}</H6>
</div>
</div>
</tpl>
<div style="clear:left"></div>
</dl>
</div>
</tpl>
</div>
</Html>
</Tpl>
<Listeners>
<ItemClick Fn="itemClick" />
<Refresh Handler="this.el.select('.item-wrap').addClsOnOver('x-view-over');" Delay="100" />
</Listeners>
</ext:DataView>
</Items>
</ext:Panel>
</div>
</asp:Content>
I think I need to use the ViewPort but have not been able to find a solution.
Thank you!
Stefano Lonati