TabPanel order with mix of local and dynamic tabs

Printable View

Jul 06, 2015, 5:15 AM
thebadcodeguy

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:

Code:

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.
Jul 06, 2015, 12:25 PM
Dimitris

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.
Jul 07, 2015, 12:38 AM
thebadcodeguy

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:

Code:

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:

Code:

<%@ 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?
Jul 10, 2015, 5:18 PM
Daniil

Hello guys,

To get the example working you could do:

Code:

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.
Jul 13, 2015, 12:01 AM
thebadcodeguy

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. :)
Aug 20, 2015, 4:20 PM
Daniil

Quote:

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

Code:

.Mode(LoadMode.Component)

. You can do the same defining a Loader for a Panel and return a GridPanel from a controller action.