What's New?

[CLOSED] Layout issue

  1. #1
    Jun 24, 2009, 8:56 AM

    [CLOSED] Layout issue

    Hi,

    We are having a problem with the layout .
    The controls are not aligning to the viewport and controls are not displaying correctly(controls are cutting down half)


    When we resize the window(Browser IE 7.0.57 and mozilla 3.0.11) and maximize then the controls are aligning properly

    Please look into the issue

    Please find the attached screenshots.

    1)Before resize
    2)While resize
    3)After maximized
  2. #2
    Jun 24, 2009, 9:04 AM

    RE: [CLOSED] Layout issue

    Hi,

    Please post test sample which reproduces the problem.
  3. #3
    Jun 25, 2009, 10:25 AM

    RE: [CLOSED] Layout issue







    Hi Valdsch

    I had few problem in the below code other than the one mentioned earlier
    1)It is not possible for me to pass the relative url to tab, it is always expecting a full path(www.yahoo.com)
    2)Sending tab title (localization strings) ( Actually I started a new thread if you can solve it anywhere it would be great)
    3)The layout issue as i mentioned earlier

    Please find the code 


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Culture="auto" UICulture="auto" meta:resourcekey="Resource" %>


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


<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.1/EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">


<head runat="server">


<title>Test</title>


<script type="text/javascript">


function addTab(tabPanel, id, url,TitleMsg) {


var tab = tabPanel.getComponent(id);


if (!tab) {


tab = tabPanel.add({ 


id: id, 


title: TitleMsg,


closable:false, 


autoLoad: {


showMask: true,


//url: url,


mode:'iframe',


maskMsg: 'Loading ' + url + '...'


} 


});


}


tab.setTitle(TitleMsg);


tabPanel.load(


{


title:TitleMsg,


showMask: true,


url:url,


title:TitleMsg


});


tabPanel.setActiveTab(tab);


}


</script>


</head>


<body>


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


<ext:ScriptManager ID="scm" runat="server" Locale="de-CH">


</ext:ScriptManager>





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


<Body>


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


<West MinWidth="175" MaxWidth="400" Split="true" Collapsible="true">


<ext:Panel ID="WestPanel" runat="server" Title="" Width="175">


<Body>


<ext:Accordion ID="Accordion1" runat="server" Animate="true" >


<ext:Panel ID="pObject" runat="server" Title="<%$Resources:Resource,strObject%>" IconCls="data-folder-icon"


Border="false" BodyStyle="padding:0px;">


<Listeners>


<%--<Expand Fn="ChangeAccordian('test')"></Expand>--%>


</Listeners>


<body>


<ext:TreePanel ID="treeObjects" runat="server" Border="false" AutoScroll="true" Width="150" RootVisible="false"


Title="">


<%-- <topbar>


<ext:Toolbar ID="tbObjects" runat="server">


<Items>


<ext:ToolbarFill />


<ext:Button ID="Button1" runat="server" Text="" Icon="ApplicationSideTree">


<Listeners>


<Click Handler="#{treeObjects}.expandAll();" />


</Listeners>


</ext:Button>


<ext:Button ID="Button2" runat="server" Text="" Icon="ApplicationSideList">


<Listeners>


<Click Handler="#{treeObjects}.collapseAll();" />


</Listeners>


</ext:Button>


</Items>


</ext:Toolbar>


</topbar>--%>


<root>


<ext:TreeNode Text="Root">


<Nodes>


<ext:TreeNode Text='Welcome' IconCls="welcome-user-icon">


<Listeners>


<%--<Click Handler="Coolite.AjaxMethods.testAjaxCall('Satya', {success: function(result){alert(result);}});" />--%>


<Click Handler="Coolite.AjaxMethods.AddContentTab('idClt', 'Messages.aspx','User')" />


</Listeners>


<Nodes>


<ext:TreeNode Text="<%$Resources:Resource,strMessages%>" IconCls="messages-icon">


<Listeners>


<Click Handler="addTab(#{tbpnlContent}, 'idClt', 'http://localhost:4888/MosaiqueWeb/Messages.aspx','Mess');" />


</Listeners>


</ext:TreeNode>


<ext:TreeNode text="<%$Resources:Resource,strMyProjects%>" IconCls="projects-icon">


<Listeners>


<Click Handler="addTab(#{tbpnlContent}, 'idClt', 'http://localhost:4888/MosaiqueWeb/MyProjects.aspx','My Projects');" />


</Listeners>


</ext:TreeNode>


<ext:TreeNode text="<%$Resources:Resource,strMyTasks%>" IconCls="tasks-icon">


<Listeners>


<Click Handler="addTab(#{tbpnlContent}, 'idClt', 'http://localhost:4888/MosaiqueWeb/MyTasks.aspx','My Tasks');" />


</Listeners>


</ext:TreeNode>


<ext:TreeNode text="<%$Resources:Resource,strMyDecisions%>" IconCls="decisions-icon">


<Listeners>


<Click Handler="addTab(#{tbpnlContent}, 'idClt', 'http://localhost:4888/MosaiqueWeb/MyDecissions.aspx','My Decisions');" />


</Listeners>


</ext:TreeNode>


<ext:TreeNode text="<%$Resources:Resource,strPerformances%>" IconCls="performances-icon">


<Listeners>


<Click Handler="addTab(#{tbpnlContent}, 'idClt', 'http://localhost:4888/MosaiqueWeb/Performances.aspx','Performances');" />


</Listeners>


</ext:TreeNode>


</Nodes>


</ext:TreeNode>


<ext:TreeNode text="<%$Resources:Resource,strDataFolder%>" IconCls="data-folder-icon">


<Nodes>


<ext:TreeNode text="<%$Resources:Resource,strAddress%>" IconCls="address-icon">


<Listeners>


<Click Handler="addTab(#{tbpnlContent}, 'idClt', 'http://localhost:4888/MosaiqueWeb/Addresses.aspx','Addresses');" />


</Listeners>


</ext:TreeNode>


<ext:TreeNode text="<%$Resources:Resource,strProjects%>" IconCls="projects-icon">


<Listeners>


<Click Handler="addTab(#{tbpnlContent}, 'idClt', 'http://localhost:4888/MosaiqueWeb/Projects.aspx','Projects');" />


</Listeners>


</ext:TreeNode>


<ext:TreeNode text="<%$Resources:Resource,strTasks%>" IconCls="tasks-icon">


<Listeners>


<Click Handler="addTab(#{tbpnlContent}, 'idClt', 'http://localhost:4888/MosaiqueWeb/Tasks.aspx','Tasks');" />


</Listeners>


</ext:TreeNode>


<ext:TreeNode text="<%$Resources:Resource,strDecisions%>" IconCls="decisions-icon">


<Listeners>


<Click Handler="addTab(#{tbpnlContent}, 'idClt', 'http://localhost:4888/MosaiqueWeb/Decissions.aspx','Decisions');" />


</Listeners>


</ext:TreeNode>


<ext:TreeNode text="<%$Resources:Resource,strDocuments%>" IconCls="document-icon">


<Listeners>


<Click Handler="addTab(#{tbpnlContent}, 'idClt', 'http://localhost:4888/MosaiqueWeb/Documents.aspx','Documents');" />


</Listeners>


</ext:TreeNode>


</Nodes>


</ext:TreeNode>


</Nodes>


</ext:TreeNode>


</root>


</ext:TreePanel>


</body>


</ext:Panel>


<ext:Panel ID="Meetings" runat="server" Title="<%$Resources:Resource,strMeetings%>" IconCls="meetings-icon"


Border="false" BodyStyle="padding:0px;">


<Listeners>


<%--<Click Handler="addTab(#{tbpnlContent}, 'idClt', 'http://localhost:4888/MosaiqueWeb/Meetings.aspx','Meetings');" />--%>


</Listeners>


<body>


<ext:TreePanel ID="treeMeetings" runat="server" Border="false" Width="150" AutoShow="true" RootVisible="false"


Title="">


<root>


<ext:TreeNode Text="Root">


<Nodes>


<ext:TreeNode text="<%$Resources:Resource,strMeetings%>" IconCls="meetings-icon">


<Listeners>


<Click Handler="addTab(#{tbpnlContent}, 'idClt', 'http://localhost:4888/MosaiqueWeb/Meetings.aspx','Meetings');" />


</Listeners>


</ext:TreeNode>


<ext:TreeNode text="<%$Resources:Resource,strMyMeetings%>" IconCls="meetings-icon">


<Listeners>


<Click Handler="addTab(#{tbpnlContent}, 'idClt', 'http://localhost:4888/MosaiqueWeb/MyMeetings.aspx','My Meetings');" />


</Listeners>


</ext:TreeNode>


<ext:TreeNode text="<%$Resources:Resource,strAgendas%>" IconCls="agendas-icon">


<Listeners>


<Click Handler="addTab(#{tbpnlContent}, 'idClt', 'http://localhost:4888/MosaiqueWeb/Agendas.aspx','Agendas');" />


</Listeners>


</ext:TreeNode>


</Nodes>


</ext:TreeNode>


</root>


</ext:TreePanel>


</body>


</ext:Panel>


<ext:Panel ID="QueryFolders" runat="server" Title="<%$Resources:Resource,strQueryFolders%>" IconCls="QueryFolder-icon"


Border="false" BodyStyle="padding:6px;">


<body>


<ucl1:QueryFolder runat="server" ID="treeQuerFolders" />


</body>


</ext:Panel>


<ext:Panel ID="LinkFolders" runat="server" Title="<%$Resources:Resource,strLinkFolders%>" IconCls="LinkFolder-icon"


Border="false" BodyStyle="padding:6px;">


<body>


<ucl:LinkFolder runat="server" ID="treeLinkFolder" />


</body>


</ext:Panel>


<ext:Panel ID="Scheduler" runat="server" Title="<%$Resources:Resource,strScheduler%>" IconCls="scheduler-icon"


Border="false" BodyStyle="padding:6px;">





<body>


Scheduler


</body>





</ext:Panel>


<ext:Panel ID="Search" runat="server" Title="<%$Resources:Resource,strSearch%>" IconCls="search-icon" Border="false"


BodyStyle="padding:6px;">


<body>


</body>


</ext:Panel>


</ext:Accordion>


</Body>


</ext:Panel>


</West>


<Center>


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


<Body>


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


<ext:TabPanel ID="tbpnlContent" runat="Server" MinTabWidth="1500" ResizeTabs="true">


<LoadMask Msg="Loading..." ShowMask="true" />


</ext:TabPanel>


</ext:FitLayout>


</Body>


</ext:Panel>


</Center>


<East>


</East>


<North>


<ext:Toolbar ID="Toolbar1" runat="Server">


<Items>


<ext:ToolbarFill />


<ext:ToolbarButton ID="tbLanguages" runat="server" Text="<%$Resources:Resource,strLanguages%>" Icon="User">


<Menu>


<ext:Menu ID="mnLanguages" runat="server">


<Items>


<ext:MenuItem ID="MenuItem4" runat="server" Text="<%$Resources:Resource,strEnglish%>">


<Listeners>


<Click Handler="Coolite.AjaxMethods.ChangeLanguage(0)" />


</Listeners>


</ext:MenuItem>


<ext:MenuItem ID="MenuItem5" runat="server" Text="<%$Resources:Resource,strGerman%>">


<Listeners>


<Click Handler="Coolite.AjaxMethods.ChangeLanguage(1)" />


</Listeners>


</ext:MenuItem>


</Items>


</ext:Menu>


</Menu>


</ext:ToolbarButton>


<ext:ToolbarButton ID="tbThemes" runat="server" Text="<%$Resources:Resource,strThemes%>" Icon="Theme">


<Menu>


<ext:Menu runat="server">


<Items>


<ext:MenuItem ID="MenuItem1" runat="server" Text="<%$Resources:Resource,strDefault%>">


<Listeners>


<Click Handler="Coolite.AjaxMethods.ChangeTheme(0)" />


</Listeners>


</ext:MenuItem>


<ext:MenuItem ID="MenuItem2" runat="server" Text="<%$Resources:Resource,strGray%>">


<Listeners>


<Click Handler="Coolite.AjaxMethods.ChangeTheme(1)" />


</Listeners>


</ext:MenuItem>


<ext:MenuItem ID="MenuItem3" runat="server" Text="<%$Resources:Resource,strSlate%>">


<Listeners>


<Click Handler="Coolite.AjaxMethods.ChangeTheme(2)" />


</Listeners>


</ext:MenuItem>


</Items>


</ext:Menu>


</Menu>


</ext:ToolbarButton>


<ext:ToolbarButton ID="ToolbarButton1" runat="server" Text="<%$Resources:Resource,strLogout%>" Icon="LockGo">


<Listeners>


<Click Handler="window.navigate('http://localhost:4888/MosaiqueWeb/Logout.aspx')" />


</Listeners>


</ext:ToolbarButton>


<%--<ext:ToolbarButton ID="AjaxCall" runat="server" Text="Click" Icon="Accept">


<Listeners>


<Click Handler="Coolite.AjaxMethods.testAjaxCall('Satya', {success: function(result){alert(result);}});" />


</Listeners>


</ext:ToolbarButton>--%>


</Items>


</ext:Toolbar>


</North>


<South>


</South>


</ext:BorderLayout>


</Body>


</ext:ViewPort>






</form>


</body>


<script type="text/javascript">


</script>


</html>
  4. #4
    Jun 30, 2009, 12:22 PM

    RE: [CLOSED] Layout issue

    Hi any reply for this issue ?

  5. #5
    Jul 01, 2009, 7:02 AM

    RE: [CLOSED] Layout issue

    Hi,

    I appologize for delay


    1. Relative path is supporting by panel (for example, the url '../../TabPanel/AddTab.aspx' works fine in your example for me). Just need to set Mode="iframe". In your js function you set 'mode: iframe'. But why you add
    tabPanel.load(
    {
    title: TitleMsg,
    showMask: true,
    url: url,
    title: TitleMsg
    });


    It breaks TabPanel. TabPanel can't load pages. You need create Tab and load inside Tab. Please remove that js code


    2. Localization should works. What problems do you have? Please note that you can't combine a string + resource string in the same property setter. The property value can only be the Resources tag.


    3. The problem that your tab panel has no tab strip at top initially. Therefore tab body gets inccorect size. Add 'pnlContent.doLayout();' to the end of your 'addTab' function


Similar Threads

  1. [CLOSED] layout issue when using RowLayout within column layout
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 11, 2012, 2:40 PM
  2. [CLOSED] FF Layout Issue
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 20, 2012, 9:24 PM
  3. [CLOSED] Layout issue
    By alliedwallet.com in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 14, 2011, 4:36 PM
  4. [CLOSED] Layout Issue
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 28, 2011, 5:37 PM
  5. [CLOSED] Layout Issue
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 12, 2009, 2:00 PM

Posting Permissions