What's New?

Issues with TabPanel, UI and TabConfig

  1. #1
    Apr 05, 2014, 9:30 PM

    Issues with TabPanel, UI and TabConfig

    Hi,

    I have tried adding the following listener to a tabPanel (call myTabPanel):

    var niceSelectTab = function (item, newTab, oldTab) {
            if (oldTab != null) {
                oldTab.tabConfig.ui = 'default';
            }
            newTab.tabConfig.ui = 'success';
        }
    The listener is actually called, but UI is never changed, and no error is thrown.


    As well, I think (specially for the "default" UI) it is quite hard to distinguish if a tab is selected or not : would be nice to have a build in possibility to set UI ONLY for the currently selected tab in tabpanel.

    I also must say that if we add several tabs in the tabPanel, the first one is selected by default : this is normal... BUT the "look" does not show it :

    here are 2 images :

    Click image for larger version.  Name: Capture.PNG  Views: 41  Size: 2.0 KB  ID: 9471
    Click image for larger version.  Name: Capture2.PNG  Views: 41  Size: 2.6 KB  ID: 9481

    The firt image is when page has just loaded, and no tab whas clicked.
    second is after a click on first tab.

    From my point of view, first image is not normal : panel shows the content of the first added tab... so tab should be selected.

    As well, i use this trick i found in the examples:
    var tabChange = function (tabPanel, newCard, oldCard) {
            if (oldCard.tabConfig && oldCard.tabConfig.ui != "default") {
                tabPanel.getTabBar().removeCls("x-tab-bar-" + oldCard.tabConfig.ui);
            }

            if (newCard.tabConfig && newCard.tabConfig.ui != "default") {
                tabPanel.getTabBar().addCls("x-tab-bar-" + newCard.tabConfig.ui);
            }
        };
    It makes selected tabPanel more easy to identify for the user... in the examples it does work because the first panel has default UI... but if first panel has any other UI in tabconfig... then it does not work until the user changes tab...

    All this just to say it really would be a nice feature if Ext.net could create some kind of options in tabPanl (or tabConfig) so that:
    - selected tab could automatically have a sepcific UI
    - selected tab could be more visible : the x-tab-bar trick could maybe as well be automatically added.


    Anyway, back to my current problem : any idea why my first javascript does not work ?


    thanks!
  2. #2
    Apr 06, 2014, 1:15 AM
    Did you register UI styles? Just if initial widgets are not used UI styles then files with ui css rules are not attached
    You can use the following code in Page_Load
    Ext.Net.ResourceManager.RegisterUI();
  3. #3
    Apr 06, 2014, 8:07 AM
    Hi Vladimir,
    thanks for you answer.
    I did not know about registering UI ... but it did not solve the issue.
    Here is sample code to reproduce the issue:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tabedmo.aspx.cs" Inherits="WebApplication1.tabedmo" %>

<%@ Import Namespace="Ext.Net.Utilities" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<script>
    var niceSelectTab = function (item, newTab, oldTab) {
        if (oldTab != null) {
            oldTab.tabConfig.ui = 'default';
        }
        newTab.tabConfig.ui = 'warning';
    }

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport1" Layout="border" runat="server">
            <Items>
                <ext:Container runat="server" ID="topContainer" Region="North" Height="80">
                   
                </ext:Container>
                <ext:TabPanel
                    ID="MainTabPanel"
                    runat="server"
                    Region="Center"
                    Margins="0 4 4 0"
                    Cls="tabs">

                    <Items>
                    </Items>
                    <Listeners>
                        <TabChange Fn="niceSelectTab" />
                    </Listeners>
                </ext:TabPanel>

            </Items>
        </ext:Viewport>
    </form>
</body>
</html>
    and code behind:

    using System;
using System.Collections.Generic;
using System.Linq;
using Ext.Net;

namespace WebApplication1
{
    public partial class tabedmo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Ext.Net.ResourceManager.RegisterUI();
            for (int i = 1; i < 5; i++)
            {
                Panel p = new Panel()
                {
                    Title = "panel " + i
                };
                p.TabConfig = new Button() { Text = p.Title, UI = UI.Default };
                p.AddTo(MainTabPanel);
            }
        }
    }
}
    here is the result:

    Click image for larger version.  Name: Capture.PNG  Views: 40  Size: 39.1 KB  ID: 9491

    thanks for your help
  4. #4
    Apr 06, 2014, 2:31 PM
    Hi,

    First, do not use AddTo method for initial UI. AddTo is designed to dynamic items rendering (during direct event). If you use it during initial page load then you will get performance degrodation. Use the following code
    MainTabPanel.Items.Add(p);
    Second, to change UI for already rendered widget you need to use setUI js method
    newTab.tab.setUI('warning');
  5. #5
    Apr 06, 2014, 4:01 PM
    Hi, thank you for this clarification.

    About using AddTo / items.Add : i must say i never understood the difference, but from what you say here is what i understand, please tell me if i am wrong:
    - addTo : only for directevents
    ==> what about directMethods ? during directmethods, i recreate all the controls i need : so in that case, i should use items.Add ?

    About tab.SetUi() : thanks, it worked !
  6. #6
    Apr 07, 2014, 4:21 PM
    AddTo method must be used if you need to render new control during direct event (direct method is direct event also, just without any event correlation)

    If you need to recreate controls (even during direct event) then need to use Items.Add (under "recreate" i mean server side recreation only, without client side impact)
  7. #7
    Apr 09, 2014, 8:54 AM
    Thanks, have a nice day!

Similar Threads

  1. [CLOSED] Updating content in tabpanel causes tabpanel to redraw incorectly
    By taylorjp2000 in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Sep 26, 2012, 2:06 PM
  2. [CLOSED] Ext.Net's tabpanel and ExtJs tabpanel anchor
    By SouthDeveloper in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 21, 2011, 11:57 AM
  3. [CLOSED] RowLayout inside of TabPanel inside of Window causing multiple issues
    By rmelancon in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Oct 07, 2010, 6:27 PM
  4. CheckboxGroup in Tabpanel doesn't render if TabPanel is initially hidden
    By drakaan in forum 1.x Help
    Replies: 3
    Last Post: Aug 21, 2009, 2:24 PM
  5. [CLOSED] Tabpanel in tabpanel from code behind
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 29, 2008, 7:56 AM

Posting Permissions