PDA

View Full Version : Force Panels Render Again when Resize Parent



nanosassa
Nov 17, 2009, 8:31 AM
Hi,

I have got a viewport with a east section collapsed, inside that there is a tabpanel with 2 tabs, inside each one a grid panel.
when activate second tab in tabpanel gridpanel inside hasn't got same width of container(tab).

do you know how to render again or update width when tab is activated? or some else solution?

I have got a FitLayout in Tab body containing gridpanel. TabPanel has property DeferredRender="false".

First GridPanel(tab one) is shown fine, but Second(tab two) Render at 50% of tab width and 10% tab Height.

I'm using coolite 0.8.2...

Apparently second tab FitLayout isn't working when tabpanel start collapsed try toogle collapsed property between true and false and you'll see...

I was used

LayoutOnTabChange="true" DeferredRender="false"
in tabpanel...then width is working but height isnot working...

Here is a Sample Code:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WidthIssue.aspx.cs" Inherits="WidthIssue" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
#Toolbar1 .x-form-trigger
{
visibility:hidden;
}
#Toolbar1 .x-form-search-trigger
{
visibility:visible;
}
</style>
<style type="text/css">
.x-grid3-summary-table td{
border-top:1px dashed #d0d0d0;
font-weight:bold;
font-size:12px;
background-color:#f0f1f3;
}
.x-tab-panel-header{
border-bottom:0 !important;
}
.icon-accept{background-image:url(../icons/accept-png/coolite.axd) !important;}
.icon-chartorganisation{background-image:url(../icons/chart_organisation-png/coolite.axd) !important;}
.icon-package{background-image:url(../icons/package-png/coolite.axd) !important;}
.icon-userbrown{background-image:url(../icons/user_brown-png/coolite.axd) !important;}
.icon-information{background-image:url(../icons/information-png/coolite.axd) !important;}
.icon-Wand{background-image:url(../icons/wand-png/coolite.axd) !important;}
.itemValue{
padding:2px;
vertical-align:middle;
}
</style>

<script type="text/javascript">
//Setea Stock Entrada
var vIN = true;
</script>

</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />

<!--***********************BUYS DOCS*************************-->

<ext:Store ID='BuysDocsStore' runat='server' AutoLoad="false" GroupField="TrsID">
<Reader>
<ext:JsonReader ReaderID="TrsXProductsID">
<Fields>
<ext:RecordField Name='TrsID' />
<ext:RecordField Name='DocumentDate' Type="Date" />
<ext:RecordField Name='DocID' />
<ext:RecordField Name='DocCode' />
<ext:RecordField Name='DocAbrev' />
<ext:RecordField Name='POSNumber' />
<ext:RecordField Name='Number' />
<ext:RecordField Name='StatusID' />
<ext:RecordField Name='TrsXProductsID' />
<ext:RecordField Name='LineOrder' />
<ext:RecordField Name='ProductID' />
<ext:RecordField Name='Code' />
<ext:RecordField Name='LineDescription' />
<ext:RecordField Name='Qty' />
<ext:RecordField Name='QtyNotLinked' />
<ext:RecordField Name='Cost' />
<ext:RecordField Name='SalePrice' />
<ext:RecordField Name='HaveSKU' />
<ext:RecordField Name='TypeID' />
<ext:RecordField Name='ThirdPartyID' />
<ext:RecordField Name='Weight' />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>

<!--************************************************** *****-->

<!--***********************BUYS ORDER DOCS*************************-->

<ext:Store ID='BuyOrderStore' runat='server' AutoLoad="false" GroupField="TrsID">
<Reader>
<ext:JsonReader ReaderID="TrsXProductsID">
<Fields>
<ext:RecordField Name='TrsID' />
<ext:RecordField Name='DocumentDate' Type="Date" />
<ext:RecordField Name='DocID' />
<ext:RecordField Name='DocCode' />
<ext:RecordField Name='DocAbrev' />
<ext:RecordField Name='POSNumber' />
<ext:RecordField Name='Number' />
<ext:RecordField Name='StatusID' />
<ext:RecordField Name='TrsXProductsID' />
<ext:RecordField Name='LineOrder' />
<ext:RecordField Name='ProductID' />
<ext:RecordField Name='Code' />
<ext:RecordField Name='LineDescription' />
<ext:RecordField Name='Qty' />
<ext:RecordField Name='QtyNotLinked' />
<ext:RecordField Name='Cost' />
<ext:RecordField Name='SalePrice' />
<ext:RecordField Name='HaveSKU' />
<ext:RecordField Name='TypeID' />
<ext:RecordField Name='ThirdPartyID' />
<ext:RecordField Name='Weight' />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>

<!--************************************************** *****-->

<!--******************USER INTERFACE***********************-->
<ext:Spotlight runat="server" ID="Spot" Duration="0.3" Easing="EaseIn" />
<ext:ViewPort runat="server" ID="ViewPortSales">
<Body>
<ext:Hidden runat="server" ID="CompanyID_value" Text="2" />
<ext:BorderLayout runat="server" ID="BorderLayoutSales">
<North MarginsSummary="5 5 0 5" Collapsible="true" CollapseMode="Mini" Split="true">
<ext:Panel runat="server" ID="mainTop" Height="165" Border="false">
<Body>
North
</Body>
</ext:Panel>
</North>
<Center MarginsSummary="0 0 0 5">
<ext:Panel runat="server" ID="TabPanelCenter" border="false">
<Body>
Products
</Body>
</ext:Panel>
</Center>
<South MarginsSummary="5 5 5 5">
<ext:Panel runat="server" ID="SouthPanelSales" Height="115" Border="true">
<Body>
South
</Body>
</ext:Panel>
</South>
<East Collapsible="true">
<ext:TabPanel runat="server" Collapsed="true" Width="700" ID="TabPanelDocuments" Title="_ToLink_Documents" Icon="Link" DeferredRender="false">
<Tabs>
<ext:Tab runat="server" id="StockDocuments" Title="Sales">
<Body>
<ext:FitLayout ID="FitLayout1" runat="server">
<ext:GridPanel
ID="GridPanelBuysDocs"
runat="server"
StoreID="BuysDocsStore"
AutoExpandColumn="LineDescription"
AutoShow="true"
Title="Sales"
>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="TrsID" Header="TrsID" Sortable="true" DataIndex="TrsID" Hidden="true">
</ext:Column>
<ext:Column ColumnID="TrsXProductsID" Header="TrsXProductsID" Sortable="true" DataIndex="TrsXProductsID" width="200" Hidden="true">
</ext:Column>
<ext:column ColumnID="LineOrder" DataIndex='LineOrder' Header='LineOrder' Sortable="true" Hideable="false" width="10" align="right">
</ext:Column>
<ext:column ColumnID="ProductID" DataIndex='ProductID' Header='ProductID' Sortable="true" Hideable="false" width="40" align="right">
</ext:Column>
<ext:column ColumnID="Code" DataIndex='Code' Header='Code' Sortable="true" Hideable="false" width="50">
</ext:Column>
<ext:column ColumnID="LineDescription" DataIndex='LineDescription' Header='LineDescription' Sortable="true" Hideable="false">
</ext:Column>
<ext:column ColumnID="Qty" DataIndex='Qty' Header='Qty' Sortable="true" Hideable="false" width="30" align="right">
</ext:Column>
<ext:column ColumnID="QtyNotLinked" DataIndex='QtyNotLinked' Header='QtyNotLinked' Sortable="true" Hideable="false" width="30" align="right">
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GroupingView
ID="GroupingView1"
runat="server"
ForceFit="true"
ShowGroupName="false"
EnableNoGroups="true" >
</ext:GroupingView>
</View>
<SelectionModel>
<ext:CheckboxSelectionModel ID="checkboxSelection" />
</SelectionModel>
<BottomBar>
<ext:Toolbar runat="server" ID="toolbarBuysDocs">
<Items>
<ext:Button runat="server" ID="cmdSetBuys" Text="Send" Icon="ArrowLeft">
</ext:Button>
<ext:ToolbarFill />
</Items>
</ext:Toolbar>
</BottomBar>
</ext:GridPanel>
</ext:FitLayout>
</Body>
</ext:Tab>
<ext:Tab runat="server" ID="BuyOrderDocuments" Title="BuysOrders">
<Body>
<ext:FitLayout ID="FitLayout2" runat="server">
<ext:GridPanel
ID="GridPanelBuyOrder"
runat="server"
StoreID="BuyOrderStore"
AutoExpandColumn="LineDescription"
AutoShow="true"
Title="Orders"
>
<ColumnModel ID="ColumnModel2" runat="server">
<Columns>
<ext:Column ColumnID="TrsID" Header="TrsID" Sortable="true" DataIndex="TrsID" Hidden="true">
</ext:Column>
<ext:Column ColumnID="TrsXProductsID" Header="TrsXProductsID" Sortable="true" DataIndex="TrsXProductsID" width="200" Hidden="true">
</ext:Column>
<ext:column ColumnID="LineOrder" DataIndex='LineOrder' Header='LineOrder' Sortable="true" Hideable="false" width="10" align="right">
</ext:Column>
<ext:column ColumnID="ProductID" DataIndex='ProductID' Header='ProductID' Sortable="true" Hideable="false" width="40" align="right">
</ext:Column>
<ext:column ColumnID="Code" DataIndex='Code' Header='Code' Sortable="true" Hideable="false" width="50">
</ext:Column>
<ext:column ColumnID="LineDescription" DataIndex='LineDescription' Header='LineDescription' Sortable="true" Hideable="false">
</ext:Column>
<ext:column ColumnID="Qty" DataIndex='Qty' Header='Qty' Sortable="true" Hideable="false" width="30" align="right">
</ext:Column>
<ext:column ColumnID="QtyNotLinked" DataIndex='QtyNotLinked' Header='QtyNotLinked' Sortable="true" Hideable="false" width="30" align="right">
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GroupingView
ID="GroupingView2"
runat="server"
ForceFit="true"
ShowGroupName="false"
EnableNoGroups="true" >
</ext:GroupingView>
</View>
<SelectionModel>
<ext:CheckboxSelectionModel />
</SelectionModel>
<BottomBar>
<ext:Toolbar runat="server" ID="toolbar1">
<Items>
<ext:Button runat="server" ID="Button1" Text="Send" Icon="ArrowLeft">
</ext:Button>
<ext:ToolbarFill />
</Items>
</ext:Toolbar>
</BottomBar>
</ext:GridPanel>
</ext:FitLayout>
</Body>
</ext:Tab>
</Tabs>
</ext:TabPanel>
</East>
</ext:BorderLayout>
</Body>
</ext:ViewPort>
</form>
</body>
</html>


Thanks.

Regards,

Rinaldo J. Sassaroli

Vladimir
Nov 17, 2009, 11:51 AM
Hi,

Is DeferredRender="false" required in your case?

nanosassa
Nov 20, 2009, 10:44 AM
Hi Vladimir,

I was removed DeferredRender and still have same problem.

I was detected: when you have 2 tabs with fitlayouts inside each one, on a tabpanel, on a section of borderlayout... fitlayout of second tab don't work.

Do you know how to fix that issue?

Thanks in advance

Rinaldo J. Sassaroli