[CLOSED] Creating TabStrip Items dynamically in Ext v2.0, but it does NOT render the style properly...

  1. #1

    [CLOSED] Creating TabStrip Items dynamically in Ext v2.0, but it does NOT render the style properly...

    Hi,
    I'm creating TabStrip Items dynamically but the style renders incorrectly ?

    Have a look at my Dynamic TabStrip which is "TabStrip1" and the difference between the static TabStrip which is "TabStrip2"


    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" TagPrefix="ext" Namespace="Ext.Net" %>
    <script runat="server">   
     
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                var lines = new List<string>() { "Line 1", "Line 2", "Line 3", "Line 4" };
                int i = 1;
                foreach (var line in lines)
                {
                    /* NEW Tab */
                    var tabStripItem = new Tab
                                           {
                                               TabID = i.ToString(),
                                               Text = line,
                                               ToolTip = line
                                           };
    
    
                    TabStrip1.Listeners.TabChange.Handler = "App.direct.LoadActiveTab(tab.id, tab.text);";
                    TabStrip1.Items.Add(tabStripItem);
                    i++;
                }
            }
        }
    
        [DirectMethod]
        public void LoadActiveTab(string id, string text)
        {
            var title = "ID #: " + id;
            X.Msg.Notify(title, text).Show();
        }
         
    </script>
    <html>
    <head>
        <title>Example of Issue </title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:TabStrip ID="TabStrip1" runat="server"  />
    
    
        <br />
        <ext:TabStrip ID="TabStrip2" runat="server">
            <Items>
                <ext:Tab Text="Summary" ActionItemID="elm1" />
                <ext:Tab Text="Data" ActionItemID="elm2" />
            </Items>
        </ext:TabStrip>
        <div id="elm1" style="padding: 5px;">
            Summary</div>
        <div id="elm2" style="padding: 5px;">
            Data</div>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jun 22, 2012 at 2:47 PM. Reason: [CLOSED]
  2. #2
    Hi,

    They seems to look the same for me.

    Could you provide a screen-shot how they look on your side?
  3. #3
    I'm using Ext.NET v2.0.4548.26755

    Click image for larger version. 

Name:	issue with TabStrip Rendering.JPG 
Views:	78 
Size:	8.9 KB 
ID:	4394


    Quote Originally Posted by Daniil View Post
    Hi,

    They seems to look the same for me.

    Could you provide a screen-shot how they look on your side?
  4. #4
    Reproduced with IE8. In IE9, FF and Chrome it's not reproducible.

    To fix it in IE8, please replace
    TabID = i.ToString()
    with
    TabID = "a" + i.ToString()
    Any id should start with a letter or underscore, not from a number. I always follow that rule to avoid such weird at the first glance issues.
  5. #5
    Thanks for the update and our internal network is ALL on IE8, hopefully I don't find any other errors like this again.

    And BTW, this works for me, I would never had guess that caused the issue...


    Quote Originally Posted by Daniil View Post
    Reproduced with IE8. In IE9, FF and Chrome it's not reproducible.

    To fix it in IE8, please replace
    TabID = i.ToString()
    with
    TabID = "a" + i.ToString()
    Any id should start with a letter or underscore, not from a number. I always follow that rule to avoid such weird at the first glance issues.
  6. #6
    Quote Originally Posted by Fahd View Post
    I would never had guess that caused the issue...
    When I have met such problem at the fist time in my practice, I had broken the head, trying to find the root of the problem:)

Similar Threads

  1. Replies: 3
    Last Post: May 31, 2012, 6:02 PM
  2. [CLOSED] creating tabStrip in javascript
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: May 10, 2012, 5:58 PM
  3. Replies: 0
    Last Post: Mar 27, 2012, 10:01 AM
  4. [CLOSED] Tabstrip tab items and dynamically changing titles
    By UGRev in forum 1.x Legacy Premium Help
    Replies: 14
    Last Post: Oct 13, 2011, 9:31 AM
  5. [CLOSED] [1.0] Tabstrip with dynamicly created items - items.count always 0
    By klaus.schwarz in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 07, 2010, 11:40 AM

Tags for this Thread

Posting Permissions