What's New?

In examples "Add tabs" ,how can I custom title?

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Mar 05, 2021, 6:33 AM

    In examples "Add tabs" ,how can I custom title?

    in this examples : https://examples5.ext.net/#/TabPanel/Basic/Add_Tabs/

    How can I custom title for each of tab ? Not only to show the url. Thank you.
    Click image for larger version.  Name: 1.JPG  Views: 148  Size: 32.7 KB  ID: 25509
  2. #2
    Mar 06, 2021, 5:46 PM
    Hello @Kerry!

    At around the line that reads:

    title : url,

    Replace the url variable with the title you want to the tab.

    Hope this helps!
  3. #3
    Mar 07, 2021, 11:25 PM

    Thanks for reply.

    I am sorry, I hadn’t made myself fully clear.
    title : url,
    Only can set the fixed for title, right?
    What I want is set each title for each tab by myself.
    like:
    Click image for larger version.  Name: 2.JPG  Views: 120  Size: 35.8 KB  ID: 25510

    If tab1 is "google.com", I can set tab title is"GG" or tab2 is "Baidu.com" I can set title is"BaiDu". Can I do that?
    Thank you very much.
    Last edited by Kerry; Mar 07, 2021 at 11:29 PM.
  4. #4
    Mar 08, 2021, 3:26 PM
    Hello again, @Kerry!

    Quote Originally Posted by Kerry
    Only can set the fixed for title, right?
    It's not fixed, it is a variable. You need, of course, to get the "GG" or "BaiDu" information off somewhere (like, having an object or array mapping a domain name to a frienly name, or passing in the value).

    For instance, to pass the value from the clicked menu entry, you can change the first lines of the client-side function addTab() to this:

    var addTab = function (tabPanel, id, url, tabTitle, menuItem) {
    var tab = tabPanel.getComponent(id);
    if (!tab) {
        tab = tabPanel.add({
            id       : id,
            title    : tabTitle,
    And then pass the title along with the other info from the tab, for instance:

    <ext:MenuItem runat="server" Text="Ext.NET">
    <Listeners>
        <Click Handler="addTab(#{TabPanel1}, 'idClt', 'https://ext.net', 'Ext.NET', this);" />
    </Listeners>
</ext:MenuItem>
    It is also possible to change the tab title after it is added. For that you'd need to add logic to find the tab's ID to an unique word, and then you'd be able to App.ID.setTitle("New Title").

    It would get a little more complex but it is, of course, possible to get any tab by something unique pertaining it (like the URL it loads) and then assign a title, it is up to you and the view you need to build.

    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
    Mar 08, 2021, 11:15 PM

    Thanks again.

    I try your way before, but didn't work.

    It's work.But I don't want URL to Tabtitle.
    title:url
<Click Handler="addTab(#{TabPanel1}, 'idClt', 'BasicS.aspx', this);" />

    When I using your code and click the menu, It's nothing show on the tab.Could you help me to check my code, Please?
    Thank you so much.

     <ext:XScript runat="server">
        <script>
            var addTab = function (tabPanel, id, url, menuItem) {
                var tab = tabPanel.getComponent(id);

                if (!tab) {
                    tab = tabPanel.add({
                        id: id,
                        title: tabTitle,
                        closable: true,
                        menuItem: menuItem,
                        loader: {
                            url: url,
                            renderer: "frame",
                            loadMask: {
                                showMask: true,
                                msg: "Loading " + url + "..."
                            }
                        }
                    });

                    tab.on("activate", function (tab) {
                        #{ MenuPanel1 }.setSelection(tab.menuItem);
                    });
                }

                tabPanel.setActiveTab(tab);
            }
        </script>
 </ext:XScript>
    
</head>
<body>
    <form id="form1" runat="server" >
       <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
   

  
    <ext:Viewport ID="Viewport1" runat="server" Layout="border">
    <Items>
         <ext:Panel ID="Panel3" 
                runat="server" 
                Title="Payroll System" 
                Region="West"
                Layout="AccordionLayout"
                Width="225" 
                MinWidth="225" 
                MaxWidth="400" 
                Split="true" 
                Collapsible="true">
                <Items>

                <ext:MenuPanel   ID="MenuPanel1"  runat="server"     Title="Working"     SelectedTextCls="bold-highlight"     Icon="ArrowSwitch">
                    <Menu ID="Menu1" runat="server">
                        <Items>

                                <ext:MenuItem runat="server" Text="Ext.NET">
                                <Listeners>
                                    <Click Handler="addTab(#{TabPanel1}, 'idClt', 'BasicS.aspx','BS', this);" />
                                </Listeners>
                            </ext:MenuItem>

                            <ext:MenuSeparator />

                            <ext:MenuItem runat="server" Text="Ext.NET forums">
                                <Listeners>
                                    <Click Handler="addTab(#{TabPanel1}, 'idGgl', 'WIP.aspx', 'WIP',this);" />
                                </Listeners>
                            </ext:MenuItem>

                            <ext:MenuSeparator />

                            <ext:MenuItem runat="server" Text="Sencha">
                                <Listeners>
                                    <Click Handler="addTab(#{TabPanel1}, 'idExt', 'http://www.sencha.com', 'Test',this);" />
                                </Listeners>
                            </ext:MenuItem>
                        </Items>
                    </Menu>
                </ext:MenuPanel>

                         <ext:MenuPanel     runat="server"     Title="system2"     SelectedTextCls="bold-highlight"     Icon="ArrowSwitch"/>
                </Items>
            </ext:Panel>

<ext:TabPanel ID="TabPanel1" runat="server" Region="Center" />


        
    
    </Items>
    </ext:Viewport> 

    
    </form>
</body>
</html>
    Last edited by Kerry; Mar 08, 2021 at 11:19 PM.
  6. #6
    Mar 09, 2021, 5:47 PM
    Hello @Kerry!

    You didn't add the tabTitle argument to the JavaScript function list of parameters.

    var addTab = function (tabPanel, id, url, >>>>>tabTitle,<<<<< menuItem) {
    I have added > and < characters to highlight the missing part of your code. Please don't add these characters to the current code or it's going to stop working.

    In case you didn't know you needed to add that text to the file, I believe it may be a good idea to review a JavaScript language development course to get a hang on what you should do with client-side code and what to expect from them. If that's the case a good starting point would be this w3schools article: JavaScript Functions - W3Schools.com.

    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. How To Get Window's New Title After JS: window1.setTitle("newTitle") ?
    By alucardg in forum 2.x Help
    Replies: 2
    Last Post: May 17, 2014, 3:01 PM
  2. [CLOSED] How add custom javascript object (like the FieldTrigger "tag") to ANY Ext.Net component?
    By adrianot in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 02, 2013, 6:54 AM
  3. [CLOSED] Is there any way to "disable" the FieldSet title label?
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 31, 2012, 8:47 PM
  4. [CLOSED] DateField replacing the "today" link with a different title and different date
    By rmelancon in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Dec 13, 2011, 2:39 PM
  5. "add tabs" functionality in a masterpage.
    By ozayExt in forum 1.x Help
    Replies: 4
    Last Post: Aug 22, 2011, 11:50 AM

Posting Permissions