Adding Tab using codebehind

Consider the following: I want to add a Tab to a TabPanel from codebehind. What do I do wrong in this example?

Code:

---

    <ext:Button ID="btnBind" runat="server" >
        <AjaxEvents>
            <Click OnEvent="btnBind_Clicked">
            </Click>
        </AjaxEvents>
    </ext:Button>
    <br />
    <ext:TabPanel ID="tabsCenterPanel" runat="server" Border="true" Height="600">
    </ext:TabPanel>

---

Code:

---

    protected void btnBind_Clicked(object sender, AjaxEventArgs e)
    {
        testTab = new Tab("t1", "Hello Tab");
        tabsCenterPanel.Tabs.Add(testTab);
    }

---

Hi gevik,

Adding Tabs during an AjaxEvent/AjaxMethod is not currently supported.


Can you add the Tab during the Page_Load and set Hidden="true", then use .Show() during the AjaxEvent?

Thank you. I will try.

<P class=MsoNormal style="MARGIN: 0in 0in 10pt">Are there any best practices for Coolite. For example what should one do and what shouldn't coming from classic asp.net development model.

Sorry to hijack this thread but I have the same issue and the Hide(), Show() has no affect.

I do this at page load and all tab panels show regardless of call to Hide().

Hi,

Please see the following example (Tab6)
https://examples1.ext.net/#/TabPanel/Basic/Show_Hide/

hi, gevik. I think these code will help you.

Code:

---

if (mo.RefEntityPath.Trim().Length>0)
                {
                    strTab = BuildNewTabString("centerMain", mo.ObjectText, tabID, true, "Loding.....", mo.RefEntityPath);
                    mi.Listeners.Click.Handler = strTab;
                }

---

The BuildNewTabString as following:

Code:

---

private string BuildNewTabString(string tabPanelID, string title, string tabID, bool closable, string maskMsg, string pageURL)
        {
            string strNewTab = @"
                    var tab = #{#TABPANEL#}.getComponent('#TABPANELID#');
                    if (!tab) {
                    tab=#{#TABPANEL#}.add({
                    id: '#TABPANELID#',
                    title: '#TITLE#',
                    closable:#CLOSABLE#,                   
                    autoLoad: {
                        showMask: true,
                        url: '#URL#',
                        mode:'iframe',
                        maskMsg: '#MASKMSG#'
                    }                   
                });#{#TABPANEL#}.setActiveTab(#TABPANELID#);}";


            strNewTab = strNewTab.Replace("#TABPANEL#", tabPanelID).Replace("#TABPANELID#", tabID).Replace("#CLOSABLE#", closable.ToString().ToLower()).Replace("#MASKMSG#", maskMsg).Replace("#URL#", pageURL).Replace("#TITLE#", title);


            return strNewTab;
        }

---

, and you can get the tab id in the server, so you can manage those tabs in your will.<NOSCRIPT></NOSCRIPT>

Hi animalisme,
I has tried your snipnet and it works! But the TabPanel doesn't set Active tab when i click the menu item again. what's wrong here?
thank you so much for resolving my problem!
Regards,
Anh Nguyen Tuan

Function build new tab should be below (bug when active tab again)

Code:

---

private string BuildNewTabString(string tabPanelID, string title, string tabID, bool closable, string maskMsg, string pageURL)
        {
            string strNewTab = @"
                    var tab = #{#TABPANEL#}.getComponent('#TABPANELID#');
                    if (!tab) {
                    tab=#{#TABPANEL#}.add({
                    id: '#TABPANELID#',
                    title: '#TITLE#',
                    closable:#CLOSABLE#,                   
                    autoLoad: {
                        showMask: true,
                        url: '#URL#',
                        mode:'iframe',
                        maskMsg: '#MASKMSG#'
                    }                   
                });}
#{#TABPANEL#}.setActiveTab(#TABPANELID#);";
 
 
            strNewTab = strNewTab.Replace("#TABPANEL#", tabPanelID).Replace("#TABPANELID#", tabID).Replace("#CLOSABLE#", closable.ToString().ToLower()).Replace("#MASKMSG#", maskMsg).Replace("#URL#", pageURL).Replace("#TITLE#", title);
 
 
            return strNewTab;
        }

---

Thanks to animalisme again :)

Hi,

The following sample demonstrates adding a new Tab to a TabPanel from code-behind and setting the ActiveTab, see

https://examples1.ext.net/#/XRender/Basic/Add_Items/

Hope this helps.