What's New?

[CLOSED] TabPanel: tab buttons alignment

Page 1 of 2 12 LastLast
  1. #1
    May 12, 2009, 5:10 AM

    [CLOSED] TabPanel: tab buttons alignment

    Hi,

    Can I shift tab buttons to the center screen (see attached picture)?

    Alex
  2. #2
    May 12, 2009, 9:18 AM

    RE: [CLOSED] TabPanel: tab buttons alignment

    Hi,

    At this momwnt we have no solution. On ExtJS forum I saw one solution but it doesn't work good
    https://extjs.com/forum/showthread.p...918#post217918
    *
  3. #3
    May 12, 2009, 11:29 AM

    RE: [CLOSED] TabPanel: tab buttons alignment

    OK, thanks
    I have a trouble when I want to change something in ext-all.css
    I try to edit [myproject]\Coolite\extjs\resources\css\ext-all.css but I don't see any effect...
  4. #4
    May 12, 2009, 5:27 PM

    RE: [CLOSED] TabPanel: tab buttons alignment

    Hi,

    Any changes in eat-all.css must be applyed on page elements (if these changes are correct). But it is better to set changes in different css file (and include this file to the page) or page
  5. #5
    May 12, 2009, 6:25 PM

    RE: [CLOSED] TabPanel: tab buttons alignment

    Yes, you are right.
    I have already made the <style> in the page and add this style in the TabPanel's Cls parameter.

    <style type="text/css">
    .centertab ul.x-tab-strip {width: 100%; text-align: left; text-indent: 250px;}
    .centertab ul.x-tab-strip li {float: none; display: inline;}
    .centertab ul.x-tab-strip-top {background:url(Images/tabs_left_background.png) #add62f repeat-y left;}
    .centertab .x-tab-strip a, .x-tab-strip span, .x-tab-strip em {display: inline;}
</style>
    There is a problem with drawing tab-buttons border stripes (see attachment).
  6. #6
    May 13, 2009, 8:27 AM

    RE: [CLOSED] TabPanel: tab buttons alignment



    Hi, Vladimir,

    I think about make few simple buttons that will looks like tab-buttons (background) and few panels. This sounds like hand-made TabPanel:)
    Do you have an idea how to implement this using Coolite?

    Alex


    ps ??????? ?????? ??????? ?????????? ????????????? ? ????? ???????? ????????.
  7. #7
    May 13, 2009, 2:11 PM

    RE: [CLOSED] TabPanel: tab buttons alignment



    I trying to use TabPanel's buttons bar with hidden <tabs> like a "menu" and few simple content Panels for each "menu item".

    How can I switch my "content panels" when TabPanel's change-selected-tab-button event fired?
  8. #8
    May 13, 2009, 2:15 PM

    RE: [CLOSED] TabPanel: tab buttons alignment

    Hi,

    Does 'setActiveTab' javascript function help you?


    setActiveTab( String/Panel tab ) : void
    Sets the specified tab as the active tab. This method fires the beforetabchange event which can return false to cancel the tab change.
    Parameters:
    tab : String/Panel
    The id or tab Panel to activate
    Returns:
    void

  9. #9
    May 13, 2009, 5:23 PM

    RE: [CLOSED] TabPanel: tab buttons alignment

    not quite..

    I have three Panels with visible=false and TabPanel with hidden <tabs> (I use the tabpanel as a menu).

    How can I show/hide those Panels from Tab's Listeners?


    <ext:BorderLayout ID="BorderLayout1" runat="server">
    <North>
        <ext:Panel ID="Panel2" runat="server" Frame="false" Height="70">
            <Body>
                <ext:BorderLayout ID="BorderLayout2" runat="server">
                    <West MaxWidth="250" MinWidth="250">
                        <ext:Panel ID="Panel1" runat="server" Frame="false" Height="70" Width="250" Cls="headerImage" BodyBorder="false">
                        </ext:Panel>
                    </West>
                    <Center>
                        <ext:TabPanel ID="TabPanel1" Height="23" TabWidth="200" runat="server" ActiveTabIndex="1" BodyBorder="false" Cls="centertab">
                            <tabs>
                                <ext:Tab ID="MyTasks" runat="server" Title="My Tasks" Height="0">
                                    <Listeners>
                                        <Activate Handler="={showPanel(PanelMyTasks, PanelProjects, PanelTasks)}" />
                                    </Listeners>
                                </ext:Tab>
                                <ext:Tab ID="Projects" runat="server" Title="Projects" Height="0">
                                    <Listeners>
                                        <Activate Handler="={showPanel(#{PanelProjects}, #{PanelMyTasks}, #{PanelTasks})}" />
                                    </Listeners>
                                </ext:Tab>
                                <ext:Tab ID="Tasks" runat="server" Title="Tasks" Height="0">
                                    <Listeners>
                                        <Activate handler="clo(#{TabPanel1})" />
                                    </Listeners>
                                </ext:Tab>
                            </tabs>
                        </ext:TabPanel> 
                    </Center>
                    <East MaxWidth="220" MinWidth="220">
                        <ext:Panel ID="Panel4" runat="server" Frame="false" Height="70" Width="220" Cls="headerBack" BodyBorder="false">
                        </ext:Panel>
                    </East>
                </ext:BorderLayout>
            </Body>
        </ext:Panel> 
    </North>
    <Center>
        <ext:Panel ID="Panel3" runat="server" Frame="false">
            <body>
                <ext:AnchorLayout ID="AnchorLayout" runat="Server">
                    <ext:Anchor>
                        <ext:Panel ID="PanelMyTasks" runat="server" Frame="false" Visible="false">
                            <body>
                                
                                    <table style="width:100%;height:100%;border-style:solid;border-width:3px;border-color:Green;">
                                        <tr><td>bla bla
</td></tr>
                                    </table>
                                

                            </body>
                        </ext:Panel>
                    </ext:Anchor>
                    <ext:Anchor>
                        <ext:Panel ID="PanelProjects" runat="server" Frame="false" Visible="false">
                            <body>
                                
                                    <table style="width:100%;height:100%;border-style:solid;border-width:3px;border-color:Red;">
                                        <tr><td>bla bla
</td></tr>
                                    </table>
                                

                            </body>
                        </ext:Panel>
                    </ext:Anchor>
                    <ext:Anchor>
                        <ext:Panel ID="PanelTasks" runat="server" Frame="false" Visible="false">
                            <body>
                                
                                    <table style="width:100%;height:100%;border-style:solid;border-width:3px;border-color:Yellow;">
                                        <tr><td>bla bla
</td></tr>
                                    </table>
                                

                            </body>
                        </ext:Panel>
                    </ext:Anchor>
                </ext:AnchorLayout>
            </body>
        </ext:Panel>
    </Center>
</ext:BorderLayout>
  10. #10
    May 14, 2009, 7:00 AM

    RE: [CLOSED] TabPanel: tab buttons alignment

    Hi,

    1. You don't need to use ={} for javascript code in Handler because raw mode is default for Handler/Fn
    2. You need use Hidden="true" for panels instead Visible="false" because Visible excludes panel from rendering at all but Hidden renders panel on client (only as hidden)
    3. After you set Hidden you can show/hide panel using show and hide client side functions of panel (or using Show/Hide wrappers on server side)

    I suggest to use CardLayout. Please see the following sample
    <%@ Page Language="C#" %>

<%@ Import Namespace="System.Collections.Generic" %>
<%@ 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">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ScriptManager ID="ScriptManager1" runat="server" />
    
    <ext:ViewPort runat="server">
        <Body>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <North>
                    <ext:TabPanel ID="TabPanel1" Height="23" TabWidth="200" runat="server" ActiveTabIndex="1" BodyBorder="false">
                        <Tabs>
                            <ext:Tab ID="MyTasks" runat="server" Title="My Tasks">                               
                            </ext:Tab>
                            <ext:Tab ID="Projects" runat="server" Title="Projects">                                
                            </ext:Tab>
                            <ext:Tab ID="Tasks" runat="server" Title="Tasks">                                
                            </ext:Tab>
                        </Tabs>
                        <Listeners>
                            <TabChange Handler="var layout = #{CenterPanel}.getLayout(); if(typeof layout == 'object'){layout.setActiveItem(this.items.indexOf(tab));}" Delay="10" />
                        </Listeners>
                    </ext:TabPanel> 
                </North>
                <Center>
                    <ext:Panel ID="CenterPanel" runat="server" Frame="false">
                        <Body>
                            <ext:CardLayout runat="server" ActiveItem="1">
                                <ext:Panel runat="server" Html="My Tasks"></ext:Panel>
                                <ext:Panel runat="server" Html="Projects"></ext:Panel>
                                <ext:Panel runat="server" Html="Tasks"></ext:Panel>
                            </ext:CardLayout>
                        </Body>
                    </ext:Panel>
                </Center>
            </ext:BorderLayout>
        </Body>
    </ext:ViewPort>
    
    </form>
</body>
</html>
    P.S. It is need use "if(typeof layout == 'object')" because layout can be uncreated yet when tab is changed
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Buttons alignment on ButtonGroup
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 01, 2012, 8:53 AM
  2. [CLOSED] tabpanel like buttons
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Aug 23, 2011, 6:02 PM
  3. [CLOSED] How to set the Toolbar buttons alignment to bottom
    By ISI in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 02, 2011, 1:02 PM
  4. [FIXED] [V0.7] Sizing bug for buttons in tabpanel
    By Jurke in forum Bugs
    Replies: 8
    Last Post: Oct 30, 2008, 11:26 AM
  5. [CLOSED] TabPanel buttons alignment
    By riccardosarti in forum 1.x Help
    Replies: 3
    Last Post: Sep 25, 2008, 4:28 PM

Posting Permissions