TabPanel order with mix of local and dynamic tabs

  1. #1

    TabPanel order with mix of local and dynamic tabs

    Hi guys,

    I've got a tabpanel with a local tab and a dynamically loaded tab; example here:

    Items.Add(new TabPanel()
                {
                    TabPosition = Ext.Net.TabPosition.Bottom,
                    ID = "blahblahID",
                    Loader = new ComponentLoader()
                    {
                        Url = "/area/controller/getGridPanel",
                        Mode = LoadMode.Script
                    },
    
                    Items =
                    {
                        new TestGridPanel()
                    }
                });
    My problem is that the loaded panel seems to always be the second tab (makes sense I guess, since it is being loaded) and I can't seem to change that. The problem doesn't seem that important, but to reload the component loaded tab I refresh the tabpanel which fetches the grid again, and when I do this the active tab switches to first tab again (again, not a dealbreaker but the user may find this annoying if they are refreshing all the time).

    Any thoughts? I've tried using TabIndex and SetActiveTab() in a success handler.

    Thanks.
  2. #2
    Hi,

    Is this what you are looking for?
    http://forums.ext.net/showthread.php...29-on-TabPanel
    http://forums.ext.net/showthread.php...fixed-position

    If not, please post a simple but working sample. Make sure it can be run as-is.
  3. #3
    Thanks,

    I changed my Render Mode for the component loaded tab to 'InsertTo' with index of 0 instead of AddTo, and now the tab loads to the left.
    But the local tab is still the active tab, even after refreshing, which doesn't solve the problem

    Here is a test case:

    CONTROLLER:
            public ActionResult GetGrid()
            {
                var testGrid = new Panel(); // normally is GridPanel, this is just for testing purposes
    
                testGrid.Title = "Dynamic";
                testGrid.ID = "TestGrid";
    
                var pagingBar = new PagingToolbar();
    
                //Hides the built in refresh button and replaces it with button that
                //rebuilds grid (data and columns both get changed)
                pagingBar.HideRefresh = true;
                pagingBar.Items.Insert(0, new Button()
                {
                    IconCls = "x-tbar-loading",
                    ToolTip = "Refresh",
                    Handler = "Ext.getCmp('TestGrid').removeAll(); Ext.getCmp('tabpaneltest').load();"
                });
    
                testGrid.BottomBar.Add(pagingBar);
    
                //Content doesn't really matter here
               
    
                //Convert grid to javascript and return
                return new JavaScriptResult()
                {
                    Script = testGrid.ToScript(mode: RenderMode.InsertTo, element: "tabpaneltest", index: 0)
                };
            }
    VIEW:
    <%@ Page Language="C#" %>
    
    <script runat="server">
    
        protected void Page_Load(object sender, EventArgs e)
        {
            Test.Items.Add(new TestViewModel());
        }
    
        public class TestViewModel : Window
        {
            public TestViewModel ()
            {
                ID = "Test_Window";
                Title = "Test";
                Width = 800;
                Height = 600;
                Border = false;
                Layout = LayoutType.Fit.ToString();
                CloseAction = CloseAction.Hide;
                Stateful = true;
    
                Items.Add(new TabPanel()
                {
                    TabPosition = Ext.Net.TabPosition.Bottom,
                    ID = "tabpaneltest",
                    Loader = new ComponentLoader()
                    {
                        Url = "/ExtNet/GetGrid",
                        Mode = LoadMode.Script,
                        TabIndex = 0
                    },
    
                    Items =
                       {
                           new Ext.Net.Panel() { Title= "Local" }
                       }
                });
            }
        }
    
    </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Panel Width="800" Height="800" runat="server" ID="Test"/>
    </body>
    </html>
    Thoughts?
  4. #4
    Hello guys,

    To get the example working you could do:
    Loader = new ComponentLoader()
    {
        ...
        Listeners =
        {
            Load =
            {
                Handler = "this.target.setActiveTab(0);"
            }
        }
    }
    But I would recommend to avoid mixing a Container's Loader and Items. I don't think they are designed to be used together.

    As an alternative approach, I could recommend to do a controller call on, for example, a TabPanel's AfterRender event.
  5. #5
    Thanks Daniil, that works.

    Yes, I think I was trying to do your alternative approach for a bit, but I couldn't figure out what to use to return the gridpanel from the controller.

    You can close the thread if you want. :)
  6. #6
    but I couldn't figure out what to use to return the gridpanel from the controller
    Please have a look at this example:
    http://mvc2.ext.net/#/Draw_Basic/Analytics

    There is a Loader used with
    .Mode(LoadMode.Component)
    . You can do the same defining a Loader for a Panel and return a GridPanel from a controller action.

Similar Threads

  1. [CLOSED] Razor tabpanel tabs, gridpanels and dynamic content
    By OriCoder in forum 2.x Premium Help
    Replies: 9
    Last Post: Apr 11, 2013, 4:33 PM
  2. [CLOSED] TabPanel tabs activating differently if remove tabs
    By rnachman in forum 1.x Premium Help
    Replies: 7
    Last Post: Mar 15, 2013, 3:41 PM
  3. Add tabs to the tabpanel
    By Vaishali in forum 1.x Help
    Replies: 1
    Last Post: Oct 04, 2012, 11:23 AM
  4. Replies: 0
    Last Post: May 11, 2010, 10:35 PM
  5. Window autoload local dynamic address
    By owl1986 in forum 1.x Help
    Replies: 5
    Last Post: Mar 02, 2010, 5:01 AM

Tags for this Thread

Posting Permissions