What's New?

[CLOSED] Needs tab from tabpanel in 2 lines or make it scrollable

  1. #1
    Jun 28, 2017, 8:28 AM

    [CLOSED] Needs tab from tabpanel in 2 lines or make it scrollable

    Hello

    Following this thread : https://forums.ext.net/showthread.ph...es-in-TabPanel is it possible now?

    Or how to make tabs scrolable?
    Last edited by fabricio.murta; Jul 14, 2017 at 4:09 PM.
  2. #2
    Jun 28, 2017, 8:51 PM
    Hello @feanor91!

    I'm afraid it is not yet natively supported still.

    But they can be both scrolled and/or moved into a dropdown menu for the hidden tabs to be chosen as shown on this example:
    - TabPanel - Advanced Tabs

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Jun 29, 2017, 7:43 AM
    Hi

    Yes it helps thanks, but 2 questions:
    1-I haven't arrow icon left and right to scroll tabs
    2-Is there a way to have a larger menu, because tab titles are longuer then menu can display

    I don't create tab from code behind but from markup, just to precise.
  4. #4
    Jun 29, 2017, 3:01 PM
    Hello @feanor91!

    For your question 1:
    You should have these arrows... One needs no special setting to have the tab panel show the arrows once the tabs overflow the panel's tab strip.

    Try this simple example, just by resizing the window, the arrows will be gone when the tabs fit and will show up again if you resize the window narrowly enough:

    <%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ext:ResourceManager runat="server" Theme="Crisp" />

        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:TabPanel runat="server">
                    <Items>
                        <ext:Panel runat="server" Title="tab one" Html="Tab number 1" />
                        <ext:Panel runat="server" Title="tab two" Html="Tab number 2" />
                        <ext:Panel runat="server" Title="tab three" Html="Tab number 3" />
                        <ext:Panel runat="server" Title="tab four" Html="Tab number 4" />
                        <ext:Panel runat="server" Title="tab five" Html="Tab number 5" />
                        <ext:Panel runat="server" Title="tab six" Html="Tab number 6" />
                        <ext:Panel runat="server" Title="tab seven" Html="Tab number 7" />
                        <ext:Panel runat="server" Title="tab eight" Html="Tab number 8" />
                        <ext:Panel runat="server" Title="tab nine" Html="Tab number 9" />
                        <ext:Panel runat="server" Title="tab ten" Html="Tab number 10" />
                        <ext:Panel runat="server" Title="tab eleven" Html="Tab number 11" />
                        <ext:Panel runat="server" Title="tab twelve" Html="Tab number 12" />
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
    </div>
    </form>
</body>
</html>
    For your question 2:
    Just set the tabScrollerMenu plugin's MaxText config to your desired length limit and you should be good.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  5. #5
    Jun 30, 2017, 7:18 AM
    Hi

    Thanks, MaxText works fine.

    Your exemple too, but my own code not, I have not the scroll icon...Perhaps because I modify a lot of CSS to have a persponalized look & fell for the website. Anyway, menu is working fine, so, it's enough.
  6. #6
    Jun 30, 2017, 5:50 PM
    Hello @feanor91!

    Yes, I guess you'd better be missing the icon for now then, so that you can customize it for your needs.

    I'll point you towards the resources related to the component (only premium subscription users will be able to see it) so that you can make it properly show up on your side:

    - CSS file: Ext.NET usually includes the -embedded version of this when you use the component
    - Image pointed by the CSS file: you probably want to change it to something that fits better your customized theme
    - CSS-related override: if changing the image you may need to re-override this to properly position your image... something like this should do:

    Ext.define('Ext.ux.TabScrollerMenu', {
    override: 'Ext.ux.TabScrollerMenu',

    showButton: function () {
        var me = this,
            retVal = me.callParent(arguments); //will call the original override/method

        trigger.setStyle('top', my_new_top);
        trigger.setStyle('right', my_new_right);

        return retVal;
    }
});
    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. [CLOSED] Help To Make the TabPanel or Tab Strip RTL
    By imaa in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 29, 2011, 8:29 AM
  2. Example of a scrollable combobox
    By dkillewo in forum 1.x Help
    Replies: 0
    Last Post: Jul 14, 2010, 1:11 PM
  3. Viewport can't scrollable?
    By weiguo526 in forum 1.x Help
    Replies: 2
    Last Post: May 10, 2010, 10:21 PM
  4. Scrollable Menu
    By testix in forum 1.x Help
    Replies: 1
    Last Post: Dec 25, 2008, 12:21 PM

Posting Permissions