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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    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:	44 
Size:	32.7 KB 
ID:	25509
  2. #2
    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

    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:	22 
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
    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
  5. #5

    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
    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

Similar Threads

  1. Replies: 2
    Last Post: May 17, 2014, 3:01 PM
  2. 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. 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