What's New?

[CLOSED] [1.0] Tabstrip with dynamicly created items - items.count always 0

  1. #1
    Jul 06, 2010, 3:43 PM

    [CLOSED] [1.0] Tabstrip with dynamicly created items - items.count always 0

    When I create TabStripsItems with AddItem the Items.Count is always 0 and the item list is empty.
    This is my example code:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="uc_event._Default" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="rsm01" runat="server" ScriptMode="Debug" />
    
    <ext:Viewport ID="ViewPort1" runat="server">
        <Items>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <North Split="true" Collapsible="true">
                    <ext:Panel ID="Panel1" runat="server" Title="Click on Save Button to add tabstrip" Height="24" Padding="6">
                    <Items>
                    </Items>
                   <BottomBar>
                         <ext:Toolbar ID="det_tob" runat="server" Flat="true">
                            <Items>                        
                                <ext:Button ID="det_tobbtnsave" runat="server" Icon="Disk">
                                    <DirectEvents>
                                        <Click OnEvent="det_tobbtnsave_Click" Timeout="300000">
                                            <EventMask ShowMask="true" />
                                        </Click>
                                    </DirectEvents>
                               
                                    <ToolTips>
                                        <ext:ToolTip ID="det_ttpbtnsave" runat="server" Html="Click on Save Button to add tabstrip" />
                                    </ToolTips>
                                </ext:Button>
                                
                                <ext:ToolbarSeparator ID="det_tbs01" runat="server" />

                                <ext:TabStrip ID="det_tstcustomer" runat="server">
                                    <Items>
                                    </Items>
                                    <DirectEvents>
                                        <TabChange OnEvent="det_tstcustomer_TabItemChanged" />
                                    </DirectEvents>
                                </ext:TabStrip>
                                
                            </Items>
                        </ext:Toolbar>
                    </BottomBar>                    
                    </ext:Panel>
                        
                </North>
                <Center>
                      <ext:Panel ID="def_pnlwuc01" runat="server" Layout="Fit" Title="Click on tabstripitem to see tabstrip count" Icon="ApplicationViewDetail" 
                         Html=" ">
                        <Items>
                        </Items>
                     </ext:Panel>
                </Center>
            </ext:BorderLayout>
        </Items>
    </ext:Viewport>
    
    
    </form>
</body>
</html>
    Codebehind

    Partial Public Class _Default
    Inherits System.Web.UI.Page
    Public TabNo As Integer

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load


    End Sub

    Public Sub det_tobbtnsave_Click(ByVal sender As Object, ByVal e As Ext.Net.DirectEventArgs)

        '---- page control
        If Not Session.Item("TabNo") Is Nothing Then
            TabNo = Session.Item("TabNo")
        Else
            TabNo = 0
        End If

        Dim detCusTabStrItem As New Ext.Net.TabStripItem
        detCusTabStrItem.Title = TabNo.ToString
        detCusTabStrItem.ItemID = TabNo.ToString

        'tabstrip count is always 0
        If det_tstcustomer.Items.Count = 0 Then
            detCusTabStrItem.Closable = False
        Else
            detCusTabStrItem.Closable = True
        End If
        det_tstcustomer.AddItem(detCusTabStrItem)

        TabNo = TabNo + 1
        Session.Item("TabNo") = TabNo

    End Sub


    Public Sub det_tstcustomer_TabItemChanged(ByVal sender As Object, ByVal e As Ext.Net.DirectEventArgs)
        Dim tbs As Ext.Net.TabStrip

        If TypeOf sender Is Ext.Net.TabStrip Then
            tbs = sender
            'tabstrip count is always 0
            'tbs.Items is empty
            def_pnlwuc01.Html = tbs.Items.Count.ToString
        End If

    End Sub


End Class
    Last edited by Vladimir; Jul 07, 2010 at 12:23 PM.
  2. #2
    Jul 06, 2010, 5:09 PM
    Hello!

    It seems the matter is the TabStrip.Items is not saved in ViewState. The TabStrip.Items do not exist during the DirectEvent request, so getting the server-side count of the collection is impossible, unless the collection is recreated.

    Please follow the link http://forums.ext.net/showthread.php...TreeGrid+nodes to get the information how to use a cache for recreating data. There is the similar situation with the TreeNodes in this topic.

    Please look at the example. I add a new tab and show an items count on client-side. If you don't really have to use DirectEvent you would use this code in your page.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Tabstrip with dynamicly created items items count always 0 .aspx.cs"
    Inherits="Work.Premium_help.Tabstrip_with_dynamicly_created_items_items_count_always_0" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <script type="text/javascript">
        var save = function() {
            if (typeof (det_tstcustomer.TabNo) == "undefined" || det_tstcustomer.TabNo == null)
                det_tstcustomer.TabNo = 0;
            det_tstcustomer.addTab(
                {
                    title: det_tstcustomer.TabNo,
                    closable: det_tstcustomer.items.length == 0 ? false : true,
                    itemID: det_tstcustomer.TabNo
                },
                det_tstcustomer.TabNo,
                false
            );
            det_tstcustomer.TabNo += 1;
        }

        var tabItemChanged = function() {
            def_pnlwuc01.body.update(det_tstcustomer.items.length);
        }                
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="rsm01" runat="server" ScriptMode="Debug" />
    <ext:Viewport ID="ViewPort1" runat="server">
        <Items>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <North Split="true" Collapsible="true">
                    <ext:Panel ID="Panel1" runat="server" Title="Click on Save Button to add tabstrip"
                        Height="24" Padding="6">
                        <Items>
                        </Items>
                        <BottomBar>
                            <ext:Toolbar ID="det_tob" runat="server" Flat="true">
                                <Items>
                                    <ext:Button ID="det_tobbtnsave" runat="server" Icon="Disk">                                        
                                        <Listeners>
                                            <Click Fn="save" />
                                        </Listeners>
                                        <ToolTips>
                                            <ext:ToolTip ID="det_ttpbtnsave" runat="server" Html="Click on Save Button to add tabstrip" />
                                        </ToolTips>
                                    </ext:Button>
                                    <ext:ToolbarSeparator ID="det_tbs01" runat="server" />
                                    <ext:TabStrip ID="det_tstcustomer" runat="server">
                                        <Items>
                                        </Items>                                        
                                        <Listeners>
                                            <TabChange Fn="tabItemChanged" />
                                        </Listeners>
                                    </ext:TabStrip>
                                </Items>
                            </ext:Toolbar>
                        </BottomBar>
                    </ext:Panel>
                </North>
                <Center>
                    <ext:Panel ID="def_pnlwuc01" runat="server" Layout="Fit" Title="Click on tabstripitem to see tabstrip count"
                        Icon="ApplicationViewDetail" Html=" ">
                        <Items>
                        </Items>
                    </ext:Panel>
                </Center>
            </ext:BorderLayout>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
    Last edited by Daniil; Jul 06, 2010 at 6:06 PM. Reason: update
  3. #3
    Jul 07, 2010, 10:49 AM
    Thanks Daniil for your solution proposal.
    Because only the ItemId of the selected TabStripItem is interesting for me I modified your solution.
    The additem is done in the codebehind and the tabItemChanged calls a codebehind function to change the content of the page.

        <script type="text/javascript">
        var tabItemChanged = function(CusId) {
        Ext.net.DirectMethods.det_tstcustomer_TabStripItemChanged(CusId);
        }                
    </script>

....


     <ext:TabStrip ID="det_tstcustomer" runat="server">
        <Items>
        </Items>
        <Listeners>
            <TabChange Handler="tabItemChanged(this.activeTab.itemId)" />
        </Listeners>
   </ext:TabStrip>
    Klaus
  4. #4
    Jul 07, 2010, 11:04 AM
    I'm glad to help you.
    Does your code work fine? Can this topic be marked as solved?
  5. #5
    Jul 07, 2010, 11:40 AM
    Hi Daniil,

    the code works fine and the thread can be marked as CLOSED.

Similar Threads

  1. [CLOSED] Creating TabStrip Items dynamically in Ext v2.0, but it does NOT render the style properly...
    By Fahd in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 22, 2012, 2:47 PM
  2. ComboBox.Items.Count is equal 0 after databinding of its Store
    By AlexMaslakov in forum 1.x Help
    Replies: 0
    Last Post: Oct 25, 2011, 10:02 AM
  3. [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
  4. [1.0] MultiCombo how to return items.count
    By steve.redmon in forum 1.x Help
    Replies: 0
    Last Post: Jun 11, 2010, 9:51 PM
  5. Count items in a ComboBox?
    By Tbaseflug in forum 1.x Help
    Replies: 1
    Last Post: Nov 18, 2009, 11:25 AM

Posting Permissions