[1.0]Can not get the code-behind-added tabs of tabpanel.

  1. #1

    [1.0]Can not get the code-behind-added tabs of tabpanel.


    I added a new tab to the tabpanel from code-behind, but I can not get the newly added tab using the TabPanel.Items. What should I do?

  2. #2

    RE: [1.0]Can not get the code-behind-added tabs of tabpanel.

    Can you post your code?
  3. #3

    RE: [1.0]Can not get the code-behind-added tabs of tabpanel.


    The following is the markup code:
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:ViewPort ID="ViewPort1" runat="server">
        <Items>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <North>
                    <ext:Panel ID="Panel1" runat="server" Title="North" Header="False" Height="29">                            
                    </ext:Panel>
                </North>
                <West Collapsible="true" Split="true" MaxWidth="200px">
                    <ext:TreePanel ID="tpnNavigator" runat="server" AutoHeight="True" 
                        RootVisible="False" Width="200px" Icon="ApplicationViewList">
                        <DirectEvents>
                            <Click OnEvent="tpnNavigator_Click">
                                <ExtraParams>
                                    <ext:Parameter Name="FunID" Value="node.id" Mode="Raw" />
                                </ExtraParams>
                            </Click>
                        </DirectEvents>
                    </ext:TreePanel>
                </West>
                <Center>
                    <ext:TabPanel ID="tpList" runat="server" Height="300" EnableTabScroll="True" 
                        Draggable="true">
                        <Items>
                            <ext:Panel ID="pnlHome" runat="server" Draggable="true" 
                                AutoWidth="true" Border="false" Icon="House" 
                                BodyStyle="padding:10px 0px 10px 10px" ButtonAlign="Center">
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </Center>
            </ext:BorderLayout>
        </Items>
    </ext:ViewPort>
    The Following is the code-behind:
        protected void tpnNavigator_Click(object sender, DirectEventArgs e)
        {
            string strFunID = e.ExtraParams["FunID"].ToString();
            string strTabID = "TAB_" + strFunID;
            bool Existed = false;
    
    
    
            foreach (Ext.Net.Component li in tpList.Items)
            {
                if (li.ID == strTabID)
                {
                    Existed = true;
                    break;
                }
            }
            if (Existed)
            {
                tpList.SetActiveTab(strTabID);
            }
            else
            {
                SysFunctions objFun = SysFunctions.SelectByFunID(strFunID);
                Ext.Net.Panel pnl = new Ext.Net.Panel();
                pnl.ID = strTabID;
                pnl.Title = objFun.FunName;
                pnl.Closable = true;
                pnl.AutoLoad.Url = objFun.FunURL;
                pnl.AutoLoad.Mode = LoadMode.IFrame;
                pnl.AutoLoad.ShowMask = true;
                pnl.AutoLoad.MaskMsg = objFun.FunURL + "......";
                //tpList.Items.Add(pnl);
                pnl.Render(tpList, RenderMode.AddTo);
                //pnl.AddTo(tpList);
                tpList.SetActiveTab(strTabID);
            }
        }
    After I clicked the treenode to add several tab in the TabPanel, the tpList.Items only contain
    'pnlHome', the newly added tab were not included. If I click the clicked treenode, the tab
    opened will be loaded again.</PRE>
  4. #4

    RE: [1.0]Can not get the code-behind-added tabs of tabpanel.

    Ok, I understand you. Maybe the better way will be using clear ExtJs? Something in this way:

    
    openTab = function(tabPanel, id, url, title, config) {
        if (!title.length || title.length === 0)
            title = "&amp;nbsp;"
    
        var tab = tabPanel.getComponent(id);
        if (!tab) {
            tab = tabPanel.add({
                id: id,
                title: title,
                closable: true,
                config: config,
                autoLoad: {
                    showMask: true,
                    url: url,
                    mode: "iframe",
                    maskMsg: "loading" + title + " ...",
                    callback: function() {
                        Ext.applyIf(this.getBody(), this.config); 
                    }
                }
            });
        }
        tabPanel.setActiveTab(tab);
        tabPanel.doLayout();
    }
    If you need to use only codebehind DirectEvent I will try to help you. But I think using for this purpose ExtJs is better way. Because coolite loses context of dynamic controls and when you call some DirectAPI it recreates controls.
  5. #5

    RE: [1.0]Can not get the code-behind-added tabs of tabpanel.


    Thank you very much.

    It's better if I can solve this problem from code-behind. Actually, I know your suggested way and it works well. The reason why I preferred code-behind are: 1. I am not familiar with the ExtJs; 2. It's easier and more convenient to do something from code-behind.

    By the way, my code works. It's just not perfect.

Similar Threads

  1. Add tabs to the tabpanel
    By Vaishali in forum 1.x Help
    Replies: 1
    Last Post: Oct 04, 2012, 11:23 AM
  2. How to close all tabs in TabPanel
    By ozayExt in forum 1.x Help
    Replies: 3
    Last Post: Apr 27, 2012, 11:48 AM
  3. Tabs are not added to tabPanel
    By Vaishali in forum 1.x Help
    Replies: 26
    Last Post: Feb 21, 2012, 8:13 AM

Posting Permissions