How to add tab using html href link

  1. #1

    How to add tab using html href link

    Hi everybody,
    In this case I want to open a new tab,we usually use this script

    <ext:XScript ID="XScript1" runat="server">
            <script>
              
                var addTab = function (tabPanel, id, url, Title) {
                    var tab = tabPanel.getComponent(id);
    
                    if (!tab) {
                        tab = tabPanel.add({
                            id: id,
                            title: Title,
                            closable: true,
                            AutoHeight: true,                  
                            Layout: "Fit",
                            loader: {
                                url: url,
                                renderer: "frame",
                                loadMask: {
                                    showMask: true,
                                    msg: "Loading " + url + "..."
                                }
                            }
                        });
                    }
    
                    tabPanel.setActiveTab(tab);
                }
            </script>
        </ext:XScript>
    then we call this using a handler inside ext.menu or button ..

         <ext:MenuItem ID="MenuItem6" runat="server" Text="new tab"
    													IconUrl="Dash/images/icon.png">
    	<Listeners>
    <Click Handler="addTab(#{TabContainer}, 'test page', '/TestPage.aspx',#{MenuItem6}.text,#{MenuItem6}.icon);" />
    		</Listeners>
    			</ext:MenuItem>
    the issue is how to call add tab function from html input,button or href

    <h3><a href="javascript:addTab(#{TabContainer}, 'test page', '/TestPage.aspx','new tab';"  >test page</a></h3> //NOT WORKING
    <h3><a href="addTab(#{TabContainer}, 'test page', '/TestPage.aspx','new tab';"  >test page</a></h3>//NOT WORKING
    <h3><a href="#" onclick="addTab(#{TabContainer}, 'test page', '/TestPage.aspx','new tab';return false;"  >test page</a></h3>//NOT WORKING
  2. #2
    Hello @odaysaed!

    Did you notice your page throwing Invalid character on those usages?..

    That's it, in the usage, the substitution never happens and you just get an invalid syntax in JavaScript when it processes the #{TabContainer} string. You can reference Ext.NET components using App.TabContainer instead.

    Also, you have a typo on every one of your javaScript codes that you don't close the parenthesis character on the call to addTab()! Not going to work that way. :)

    Your second attempt is also a no-go, what would work here is:

    <h3><a href="javascript:addTab(App.TabContainer, 'test page', '/TestPage.aspx','new tab');"  >test page</a></h3>
    <h3><a href="#" onclick="addTab(App.TabContainer, 'test page', '/TestPage.aspx','new tab');return false;"  >test page</a></h3>
    Also I don't particularly see a reason for you to use the ext:XScript code block, but it does not break anything either.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thanks for your replay.
    it works but instead of

    <h3><a href="#" onclick="addTab(App.TabContainer, 'test page', '/TestPage.aspx','new tab');return false;"  >test page</a></h3>
    i used

    <h3><a href="#" onclick="addTab(parent.App.TabContainer, 'test page', '/TestPage.aspx','new tab');return false;"  >test page</a></h3>
    Thanks again.

Similar Threads

  1. Possible to open partial view from an href?
    By craigthames in forum 2.x Help
    Replies: 2
    Last Post: Dec 04, 2014, 11:08 AM
  2. bind to grid view with <a href>
    By dx7 in forum 2.x Help
    Replies: 2
    Last Post: Oct 23, 2012, 9:02 AM
  3. [CLOSED] How to show a link by href in gridpanel
    By Oliver in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 23, 2012, 12:10 PM
  4. addTab with html link
    By ozayExt in forum 1.x Help
    Replies: 2
    Last Post: Dec 17, 2011, 6:59 AM
  5. Why # is coming from treepanel node href?
    By eldhose in forum 1.x Help
    Replies: 6
    Last Post: Feb 03, 2011, 5:37 PM

Posting Permissions