What's New?

Tab Panel Under View Port

  1. #1
    Mar 29, 2010, 1:36 AM

    Tab Panel Under View Port

    Hi all,


    I have kept a TabPanel in viewport,it is working ..But my problem is that,i have kept two
    panels in TabPanel..In 2nd panel i have kept a GridPanel..
    For Gridpanel i hav kept FitLayout,so that Grid should cover the whole <center> space,but fitlayout is not working..why?
    



<ext:ScriptManager ID="smTab" runat="server" Theme="Slate" />








<ext:Store ID="stoLedgerAccounts" runat="server">


<Reader>


<ext:JsonReader>


<Fields>





<ext:RecordField Name="Date" />


<ext:RecordField Name="abc" />


<ext:RecordField Name="xyz" /> 





</Fields> 


</ext:JsonReader> 


</Reader>


<SortInfo Field="Date" Direction="ASC" /> 


</ext:Store>











<ext:ViewPort ID="viewport1" runat="server">


<Body>


<ext:BorderLayout ID="borderlayout1" runat="server">





<Center>





<ext:TabPanel ID="tabpnl1" runat="server" Frame="true" >


<Tabs>


<ext:Tab ID="tab1" runat="server" Title="ABC" Frame="true" >


<Body> 








<ext:Panel ID="pnlNorth" runat="server" Height="50" Frame="true" >


<Body> 








<table>


<tr>


<td>


<ext:Label ID="lblYardName" runat="server" Text="Yard Name" /> 


</td>


<td>


<ext:ComboBox ID="cmbYardName" runat="server"/>


</td>





<td width="20" />


<td>


<ext:Label ID="lblFrom" runat="server" Text="From" />


</td> 


<td>


<ext:DateField ID="dtFrom" runat="server" Format="d-m-yyyy" />


</td> 





<td width="20" />


<td>


<ext:Label ID="lblTo" runat="server" Text="To" />


</td> 


<td>


<ext:DateField ID="dtTo" runat="server" Format="d-m-yyyy" />


</td> 





<td>


<ext:Button ID="btn" runat="server" Text="button" />


</td>


</tr>


</table>





</Body> 


</ext:Panel> 


 











<ext:Panel 


ID="pnlGrid" 


runat="server" 


Frame="true" 


BodyStyle="padding:2px" >


<Body>





<ext:FitLayout ID="fitlayout1" runat="server" >








<ext:GridPanel 


ID="grd1" 


runat="server" 


StoreID="stoLedgerAccounts" >





<ColumnModel>


<Columns>





<ext:Column DataIndex="Date" Header="Date" />


<ext:Column DataIndex="abc" Header="abc" />


<ext:Column DataIndex="xyz" Header="xyz" />





</Columns> 


</ColumnModel>


<BottomBar>


<ext:PagingToolbar 


ID="ptbLedgerAccounts" 


runat="server" 


StoreID="stoLedgerAccounts" 


DisplayInfo="true" 


DisplayMsg="Displaying Ledger Account Details {0}-{1} of {2}" 


EmptyMsg="No Ledger Account Details To Display" />





</BottomBar> 


</ext:GridPanel> 





</ext:FitLayout> 





</Body> 


</ext:Panel> 











</Body> 


</ext:Tab> 


</Tabs>


</ext:TabPanel>








</Center>


</ext:BorderLayout> 


</Body> 


</ext:ViewPort>
  2. #2
    Mar 29, 2010, 8:45 AM

    RE: Tab Panel Under View Port

    hi

    i hav commented viewport and kept panel,but it is not showing anything istead of tab..

    Plz check out the output screen in attachments
    



<ext:TabPanel ID="tabpnlFitLayout" runat="server" Frame="true">




<Tabs>




<ext:Tab ID="tab1" runat="server" Title="ABC" Frame="true">




<Body> 




<%-- <ext:ViewPort ID="viewportTabFitLayout" runat="server">




<Body>




--%>









<ext:Panel ID="pnl1" runat="server" >




<Body>




<ext:BorderLayout runat="server" > 


<North MarginsSummary="23 0 0 0">


<ext:Panel ID="pnl2" runat="server" Height="100" Frame="true" Border="false" Title="ASSGFD" >




<Body> 



<ext:Store ID="stoLedgerAccounts" runat="server">




<Reader>




<ext:JsonReader>




<Fields>





<ext:RecordField Name="Date" />








</Fields> 


</ext:JsonReader> 


</Reader>





</ext:Store>





<table>


<tr>


<td>


<ext:Label ID="lblYardName" runat="server" Text="Yard Name" /> 



</td>


<td>


<ext:ComboBox ID="cmbYardName" runat="server"/>


</td>






<td width="20" />


<td>


<ext:Label ID="lblFrom" runat="server" Text="From" />


</td> 


<td>


<ext:DateField ID="dtFrom" runat="server" Format="d-m-yyyy" />



</td> 







<td width="20" />



<td>



<ext:Label ID="lblTo" runat="server" Text="To" />



</td> 



<td>



<ext:DateField ID="dtTo" runat="server" Format="d-m-yyyy" />



</td> 





<td>


<ext:Button ID="btn" runat="server" Text="button" >



<AjaxEvents>



<Click OnEvent="btn_click" />






</AjaxEvents>





</ext:Button>


</td>


</tr>



</table>












</Body> 



</ext:Panel>







</North> 







<Center>



<ext:Panel 



ID="pnlGrid" 



runat="server" 



Frame="true" Title="dfgfdgs" 



BodyStyle="padding:5px">



<Body>




<ext:FitLayout ID="fitlayoutLedgerAccounts" runat="server">









<ext:GridPanel 



ID="grdLedgerAccounts" 



runat="server" 



StoreID="stoLedgerAccounts">







<ColumnModel>




<Columns> 



<ext:Column DataIndex="Date" Header="Date" /> 



</Columns> 



</ColumnModel>







<BottomBar>


<ext:PagingToolbar 



ID="ptbLedgerAccounts" 




runat="server" 




StoreID="stoLedgerAccounts" 




DisplayInfo="true" 




DisplayMsg="Displaying Ledger Account Details {0}-{1} of {2}" 




EmptyMsg="No Ledger Account Details To Display" />







</BottomBar> 







</ext:GridPanel> 






</ext:FitLayout> 






</Body> 



</ext:Panel> 



</Center> 






</ext:BorderLayout> 




</Body>




</ext:Panel> 



<%-- </Body> 



</ext:ViewPort>--%> 



</Body> 






</ext:Tab> 







</Tabs>




</ext:TabPanel>
  3. #3
    Mar 29, 2010, 8:47 AM

    RE: Tab Panel Under View Port

    Remove pnl1 or wrap it by FitLayout
  4. #4
    Mar 29, 2010, 8:51 AM

    RE: Tab Panel Under View Port

    hi..
    ya i removed pnl1 and tried,but no response..im getting same output..
  5. #5
    Mar 29, 2010, 8:57 AM

    RE: Tab Panel Under View Port

    Hi,

    Please post the code of your latest test case
  6. #6
    Mar 29, 2010, 9:07 AM

    RE: Tab Panel Under View Port 

    



<ext:TabPanel ID="tabpnlFitLayout" runat="server" Frame="true">


<Tabs>


<ext:Tab ID="tab1" runat="server" Title="ABC" Frame="true">


<Body> 


<%-- <ext:ViewPort ID="viewportTabFitLayout" runat="server">


<Body>--%>








<%-- <ext:Panel ID="pnl1" runat="server" >


<Body>--%>








<ext:BorderLayout runat="server" > 





<North MarginsSummary="23 0 0 0">





<ext:Panel ID="pnl2" runat="server" Height="100" Frame="true" Border="false" Title="ASSGFD" >


<Body> 








<ext:Store ID="stoLedgerAccounts" runat="server">


<Reader>


<ext:JsonReader>


<Fields>





<ext:RecordField Name="Date" />








</Fields> 


</ext:JsonReader> 


</Reader>





</ext:Store>





<table>


<tr>


<td>


<ext:Label ID="lblYardName" runat="server" Text="Yard Name" /> 


</td>


<td>


<ext:ComboBox ID="cmbYardName" runat="server"/>


</td>





<td width="20" />


<td>


<ext:Label ID="lblFrom" runat="server" Text="From" />


</td> 


<td>


<ext:DateField ID="dtFrom" runat="server" Format="d-m-yyyy" />


</td> 





<td width="20" />


<td>


<ext:Label ID="lblTo" runat="server" Text="To" />


</td> 


<td>


<ext:DateField ID="dtTo" runat="server" Format="d-m-yyyy" />


</td> 





<td>


<ext:Button ID="btn" runat="server" Text="button" >


<AjaxEvents>


<Click OnEvent="btn_click" />





</AjaxEvents>





</ext:Button>


</td>


</tr>


</table>











</Body> 


</ext:Panel>





</North> 





<Center>


<ext:Panel 


ID="pnlGrid" 


runat="server" 


Frame="true" Title="dfgfdgs" 


BodyStyle="padding:5px">


<Body>





<ext:FitLayout ID="fitlayoutLedgerAccounts" runat="server">








<ext:GridPanel 


ID="grdLedgerAccounts" 


runat="server" 


StoreID="stoLedgerAccounts">





<ColumnModel>


<Columns> 


<ext:Column DataIndex="Date" Header="Date" /> 


</Columns> 


</ColumnModel>





<BottomBar>


<ext:PagingToolbar 


ID="ptbLedgerAccounts" 


runat="server" 


StoreID="stoLedgerAccounts" 


DisplayInfo="true" 


DisplayMsg="Displaying Ledger Account Details {0}-{1} of {2}" 


EmptyMsg="No Ledger Account Details To Display" />





</BottomBar> 





</ext:GridPanel> 





</ext:FitLayout> 





</Body> 


</ext:Panel> 


</Center> 





</ext:BorderLayout> 


<%--</Body>


</ext:Panel> --%>





<%-- </Body> 


</ext:ViewPort> --%>





</Body> 





</ext:Tab> 








</Tabs>


</ext:TabPanel>
  7. #7
    Mar 29, 2010, 9:12 AM

    RE: Tab Panel Under View Port

    Hi,

    I don't see size for TabPanel. Did you define TabPanel inside layout?
  8. #8
    Mar 29, 2010, 9:18 AM

    RE: Tab Panel Under View Port

    ya i difined..plz check this code..
    



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


<%@ 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 runat="server">


<title>Untitled Page</title>


</head>


<body>


<form id="form1" runat="server">





<ext:ScriptManager ID="smTabFitLayout" runat="server"/>








<ext:TabPanel ID="tabpnlFitLayout" runat="server" Frame="true">


<Tabs>


<ext:Tab ID="tab1" runat="server" Title="ABC" Frame="true">


<Body> 


<%-- <ext:ViewPort ID="viewportTabFitLayout" runat="server">


<Body>--%>








<%-- <ext:Panel ID="pnl1" runat="server" >


<Body>--%>








<ext:BorderLayout runat="server" > 





<North MarginsSummary="23 0 0 0">





<ext:Panel ID="pnl2" runat="server" Height="100" Frame="true" Border="false" Title="ASSGFD" >


<Body> 








<ext:Store ID="stoLedgerAccounts" runat="server">


<Reader>


<ext:JsonReader>


<Fields>





<ext:RecordField Name="Date" />








</Fields> 


</ext:JsonReader> 


</Reader>





</ext:Store>





<table>


<tr>


<td>


<ext:Label ID="lblYardName" runat="server" Text="Yard Name" /> 


</td>


<td>


<ext:ComboBox ID="cmbYardName" runat="server"/>


</td>





<td width="20" />


<td>


<ext:Label ID="lblFrom" runat="server" Text="From" />


</td> 


<td>


<ext:DateField ID="dtFrom" runat="server" Format="d-m-yyyy" />


</td> 





<td width="20" />


<td>


<ext:Label ID="lblTo" runat="server" Text="To" />


</td> 


<td>


<ext:DateField ID="dtTo" runat="server" Format="d-m-yyyy" />


</td> 





<td>


<ext:Button ID="btn" runat="server" Text="button" >


<AjaxEvents>


<Click OnEvent="btn_click" />





</AjaxEvents>





</ext:Button>


</td>


</tr>


</table>











</Body> 


</ext:Panel>





</North> 





<Center>


<ext:Panel 


ID="pnlGrid" 


runat="server" 


Frame="true" Title="dfgfdgs" 


BodyStyle="padding:5px">


<Body>





<ext:FitLayout ID="fitlayoutLedgerAccounts" runat="server">








<ext:GridPanel 


ID="grdLedgerAccounts" 


runat="server" 


StoreID="stoLedgerAccounts">





<ColumnModel>


<Columns> 


<ext:Column DataIndex="Date" Header="Date" /> 


</Columns> 


</ColumnModel>





<BottomBar>


<ext:PagingToolbar 


ID="ptbLedgerAccounts" 


runat="server" 


StoreID="stoLedgerAccounts" 


DisplayInfo="true" 


DisplayMsg="Displaying Ledger Account Details {0}-{1} of {2}" 


EmptyMsg="No Ledger Account Details To Display" />





</BottomBar> 





</ext:GridPanel> 





</ext:FitLayout> 





</Body> 


</ext:Panel> 


</Center> 





</ext:BorderLayout> 


<%--</Body>


</ext:Panel> --%>





<%-- </Body> 


</ext:ViewPort> --%>





</Body> 





</ext:Tab> 








</Tabs>


</ext:TabPanel> 





</form>


</body>


</html>
  9. #9
    Mar 29, 2010, 9:22 AM

    RE: Tab Panel Under View Port

    Hi,

    No, you did not define TabPanel inside layout.


    1. Place ViewPort to the page
    2. Place FitLayout inside ViewPort
    3. Place TabPanel inside FitLayout
  10. #10
    Mar 29, 2010, 9:42 AM

    RE: Tab Panel Under View Port

    ya i tried..the output came..but whenever i click on internet Explorer Maximize button,
    the grid panel is not displaying fully means paging toolbar is not displaying..i hav attached .jpeg u can check out

Similar Threads

  1. How To Add tab In center Panel When we click tree Node in West Panel in View Port
    By Dinesh.T in forum 1.x Help
    Replies: 1
    Last Post: Oct 26, 2012, 8:52 AM
  2. [CLOSED] Unable to get panel to fit to view port and scroll
    By Labyrinth in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jun 17, 2010, 9:41 PM
  3. Display window outside center page of the View Port
    By Hari in forum 1.x Help
    Replies: 0
    Last Post: Mar 09, 2010, 9:31 AM
  4. Center layout in view port
    By speedstepmem4 in forum 1.x Help
    Replies: 1
    Last Post: Aug 24, 2009, 4:38 AM
  5. [CLOSED] View Port Layout
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 07, 2009, 10:52 AM

Posting Permissions