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

Page 1 of 2 12 LastLast
  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:	51 
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:	28 
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
  7. #7

    Thanks again.

    I get it.I am 'New'.I will continue to study hard!
    Thank you for your patient reply.
  8. #8
    Glad it helped, good luck learning these technologies!

    While we can't really help much with basic JavaScript and C# or VB.NET, this forums as well as our examples explorer are a great source of information and examples to a vast diversity of options and scenarios you could model with Ext.NET to ease a bit the steep learning curve involved in JS and C#/VB.

    So most questions you will have are very likely to already be answered via examples or threads here, so a good search in our resources may prove fruitful more often that one would expect.

    I strongly suggest you to take your time and browse thoroughly thru our online examples. You may not need, now, most of what it features, but when you do, you'd remember where to look.
    Fabrício Murta
    Developer & Support Expert
  9. #9

    I tried , but did't work.

    Unfortunately, I can't search on the top search box. I can't use google in China.
    And than I try to search forums in single and multiple,but showing this.
    Did I miss something ?

    Click image for larger version. 

Name:	3.JPG 
Views:	26 
Size:	90.0 KB 
ID:	25513
  10. #10
    Hello again @Kerry!

    Sorry you can't use google to search. But you are probably going to be able to get good results with forums internal search as you shown. Just fill the keywords field and not the tag one. We seldom use tags in the threads here so that's not going to be very useful.

    It may take a few attempts until you find the right keywords for what you're looking for, but that's just the same when google-searching.

    The Examples explorers also support search, and that's no google-based, so you should also be able to find nice examples on what you need by searching therein.
    Fabrício Murta
    Developer & Support Expert
Page 1 of 2 12 LastLast

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