[CLOSED] Grid view Paging tool bar

  1. #1

    [CLOSED] Grid view Paging tool bar

    Hi,

    Recently we have upgraded the coolite dll 1.0 version.

    We have placed style ="display:none" in the tr and we make it display:block in the javascript.

    So with this the grid view gets hidden and visible.

    After upgrading to the new version, this no longer works. Grid view gets visible but the paging tool bar does not get visible.

    Your quick reply is greatly appreciated.


    Thanks
    Majestic
    Last edited by Daniil; Dec 03, 2010 at 10:51 AM. Reason: [CLOSED]
  2. #2
    Hi,

    I would suggest you to use GridPanel's API: show(), hide(), setVisible() methods.

    Here is an example demonstrates using of .setVisible()methods.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] {"test11", "test12", "test13"},
                    new object[] {"test12", "test22", "test23"},
                    new object[] {"test13", "test32", "test33"}
                };
                store.DataBind();
            }
        }
    </script>
    
    <!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>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Hello from toolbar!" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:GridPanel>
        <ext:Button runat="server" Text="Toggle visibility">
            <Listeners>
                <Click Handler="GridPanel1.setVisible(!GridPanel1.isVisible())" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
  3. #3

    Grid view paging tool bar with Display property

    I have lot of other controls inside a table. Gridview is one of the control.

    so only used display property for the row.(tr).
    Inside the row we have table which contain multiple rows.
    Everything works except the paging tool bar

    Please let me know how to solve the issue..

    Thanks


    Quote Originally Posted by Daniil View Post
    Hi,

    I would suggest you to use GridPanel's API: show(), hide(), setVisible() methods.

    Here is an example demonstrates using of .setVisible()methods.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] {"test11", "test12", "test13"},
                    new object[] {"test12", "test22", "test23"},
                    new object[] {"test13", "test32", "test33"}
                };
                store.DataBind();
            }
        }
    </script>
     
    <!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>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Hello from toolbar!" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:GridPanel>
        <ext:Button runat="server" Text="Toggle visibility">
            <Listeners>
                <Click Handler="GridPanel1.setVisible(!GridPanel1.isVisible())" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
  4. #4
    What about hiding and showing PagingToobar?

    Example
    PagingToobar1.hide(); // or GridPanel1.getPagingToolbar().hide()
    PagingToobar1.show(); // or GridPanel1.getPagingToolbar().show()
    If the issue persist please provide us with a simplified sample to reproduce.
  5. #5

    Paging Tool bar

    It was working fine 0.8 version. I dont want to show /hide controls individually. what ever i have wrapped inside the row - tr tag should get visible /hidden.

    Thanks
    Majestic


    Quote Originally Posted by Daniil View Post
    What about hiding and showing PagingToobar?

    Example
    PagingToobar1.hide(); // or GridPanel1.getPagingToolbar().hide()
    PagingToobar1.show(); // or GridPanel1.getPagingToolbar().show()
    If the issue persist please provide us with a simplified sample to reproduce.
  6. #6
    Hi,

    Please provide a sample to reproduce. I was unable to reproduce the issue using the following code.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] {"test1"},
                    new object[] {"test2"},
                    new object[] {"test3"},
                    new object[] {"test4"},
                    new object[] {"test5"},
                    new object[] {"test6"},
                    new object[] {"test7"},
                    new object[] {"test8"},
                    new object[] {"test9"}
                };
                store.DataBind();
            }
        }
    </script>
    
    <!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>Ext.Net Example</title>
    
        <style type="text/css">
            .myHideClass tr {
                display: none;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <table id="table1" width="100%">
            <tr>
                <td>
                    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                        <Store>
                            <ext:Store runat="server">
                                <Reader>
                                    <ext:ArrayReader>
                                        <Fields>
                                            <ext:RecordField Name="test" />
                                        </Fields>
                                    </ext:ArrayReader>
                                </Reader>
                            </ext:Store>
                        </Store>
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column Header="Test1" DataIndex="test" />
                            </Columns>
                        </ColumnModel>
                        <BottomBar>
                            <ext:PagingToolbar runat="server" PageSize="3" />
                        </BottomBar>
                    </ext:GridPanel>
                </td>
            </tr>
        </table>
        <ext:Button runat="server" Text="Hide">
            <Listeners>
                <Click Handler="Ext.get('table1').addClass('myHideClass')" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Show">
            <Listeners>
                <Click Handler="Ext.get('table1').removeClass('myHideClass')" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
  7. #7

    Sample code

    hi,
    The below sample reproduce the issue..plz check it.

    If you remove autoheight and autowidth property of the grid and set height and width value manually , the paging toolbar working well in below sample...



    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
        }
        protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)
        {
            this.BindData();
        }
        private void BindData()
        {
            if (rblPending.Items[0].Checked)
            {
                var store = this.GridPanel1.GetStore();
                store.DataSource = this.Data;
                store.DataBind();
            }
            else
            {
                var store1 = this.GridPanel2.GetStore();
                store1.DataSource = this.Data;
                store1.DataBind();
            }
        }
        private object[] Data
        {
            get
            {
                DateTime now = DateTime.Now;
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
                };
            }
        }
        protected void rblPending_change(object sender, DirectEventArgs e)
        {
            BindData();
        }
        
    </script>
    <!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>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" language="javascript">
    function ShowHideTradeTransaction()
    {
    if(rblPending.items.items[0].checked)
    {
      document.getElementById('tr1').style.display="block";
      document.getElementById('tr2').style.display="none";
    }
    else if(rblPending.items.items[1].checked)
    {  
      document.getElementById('tr1').style.display="none";
      document.getElementById('tr2').style.display="block"; 
    } 
    }
        </script>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager ID="scpmgrPendingTrades" runat="server">
            <Listeners>
                <DocumentReady Fn="Ext.net.DirectEvent.showFailure = Ext.emptyFn;" />
            </Listeners>
        </ext:ResourceManager>
        <table align="center" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td align="center">
                    <ext:RadioGroup ID="rblPending" AutoWidth="true" runat="server">
                        <Items>
                            <ext:Radio ID="Radio1" runat="server" AutoWidth="true" BoxLabel="Default Trade/Quote"
                                Checked="true">
                                <Listeners>
                                    <Check Fn="ShowHideTradeTransaction" />
                                </Listeners>
                            </ext:Radio>
                            <ext:Radio ID="Radio2" runat="server" AutoWidth="true" BoxLabel="Executed Transaction">
                                <Listeners>
                                    <Check Fn="ShowHideTradeTransaction" />
                                </Listeners>
                            </ext:Radio>
                        </Items>
                        <DirectEvents>
                            <Change OnEvent="rblPending_change">
                            </Change>
                        </DirectEvents>
                    </ext:RadioGroup>
                </td>
            </tr>
            <tr id="tr1" runat="server">
                <td>
                    <ext:Store ID="Store2" runat="server" OnRefreshData="MyData_Refresh">
                        <AutoLoadParams>
                            <ext:Parameter Name="start" Value="0" Mode="Raw" />
                            <ext:Parameter Name="limit" Value="20" Mode="Raw" />
                        </AutoLoadParams>
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="company" />
                                    <ext:RecordField Name="price" Type="Float" />
                                    <ext:RecordField Name="change" Type="Float" />
                                    <ext:RecordField Name="pctChange" Type="Float" />
                                    <ext:RecordField Name="lastChange" Type="Date" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                    <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" StoreID="Store2"
                        Title="Array Grid" AutoWidth="true" AutoHeight="true" AutoExpandColumn="Company">
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:RowNumbererColumn />
                                <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company" />
                                <ext:Column Header="Price" Width="75" DataIndex="price">
                                </ext:Column>
                                <ext:Column Header="Change" Width="75" DataIndex="change">
                                </ext:Column>
                                <ext:Column Header="Change" Width="75" DataIndex="pctChange">
                                </ext:Column>
                                <ext:DateColumn Header="Last Updated" Width="85" DataIndex="lastChange" Format="H:mm:ss" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel runat="server" />
                        </SelectionModel>
                        <LoadMask ShowMask="true" />
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="20">
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:GridPanel>
                </td>
            </tr>
            <tr id="tr2" style="display: none;" runat="server">
                <td>
                    <ext:Store ID="Store1" runat="server" OnRefreshData="MyData_Refresh">
                        <AutoLoadParams>
                            <ext:Parameter Name="start" Value="0" Mode="Raw" />
                            <ext:Parameter Name="limit" Value="20" Mode="Raw" />
                        </AutoLoadParams>
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="company" />
                                    <ext:RecordField Name="price" Type="Float" />
                                    <ext:RecordField Name="change" Type="Float" />
                                    <ext:RecordField Name="pctChange" Type="Float" />
                                    <ext:RecordField Name="lastChange" Type="Date" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                    <ext:GridPanel ID="GridPanel2" runat="server" StripeRows="true" StoreID="Store1"
                        Title="Array Grid" AutoWidth="true" AutoHeight="true" AutoExpandColumn="Company">
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:RowNumbererColumn />
                                <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company" />
                                <ext:Column Header="Price" Width="75" DataIndex="price">
                                </ext:Column>
                                <ext:Column Header="Change" Width="75" DataIndex="change">
                                </ext:Column>
                                <ext:Column Header="Change" Width="75" DataIndex="pctChange">
                                </ext:Column>
                                <ext:DateColumn Header="Last Updated" Width="85" DataIndex="lastChange" Format="H:mm:ss" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                        </SelectionModel>
                        <LoadMask ShowMask="true" />
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar2" runat="server" PageSize="20">
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:GridPanel>
                </td>
            </tr>
        </table>
        </form>
    </body>
    </html>
  8. #8
    Hi,

    Well, 'display:none' element has no size therefore the grid cannot calculate the size properly
    Please see the following sample (in this sample we use shifting instead hiding)
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
        }
        protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)
        {
            this.BindData();
        }
        private void BindData()
        {
            if (rblPending.Items[0].Checked)
            {
                var store = this.GridPanel1.GetStore();
                store.DataSource = this.Data;
                store.DataBind();
            }
            else
            {
                var store1 = this.GridPanel2.GetStore();
                store1.DataSource = this.Data;
                store1.DataBind();
            }
        }
        private object[] Data
        {
            get
            {
                DateTime now = DateTime.Now;
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
                };
            }
        }
        protected void rblPending_change(object sender, DirectEventArgs e)
        {
            BindData();
        }
         
    </script>
    <!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>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" language="javascript">
    function ShowHideTradeTransaction()
    {
    if(rblPending.items.items[0].checked)
    {
      Ext.get('tr1').removeClass("x-hide-offsets");
      Ext.get('tr2').addClass("x-hide-offsets");
    }
    else if(rblPending.items.items[1].checked)
    {  
      Ext.get('tr1').addClass("x-hide-offsets");
      Ext.get('tr2').removeClass("x-hide-offsets");
    } 
    }
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="scpmgrPendingTrades" runat="server">
            <Listeners>
                <DocumentReady Fn="Ext.net.DirectEvent.showFailure = Ext.emptyFn; Ext.get('tr2').addClass('x-hide-offsets');" />
            </Listeners>
        </ext:ResourceManager>
        <table align="center" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td align="center">
                    <ext:RadioGroup ID="rblPending" AutoWidth="true" runat="server">
                        <Items>
                            <ext:Radio ID="Radio1" runat="server" AutoWidth="true" BoxLabel="Default Trade/Quote"
                                Checked="true">
                                <Listeners>
                                    <Check Fn="ShowHideTradeTransaction" />
                                </Listeners>
                            </ext:Radio>
                            <ext:Radio ID="Radio2" runat="server" AutoWidth="true" BoxLabel="Executed Transaction">
                                <Listeners>
                                    <Check Fn="ShowHideTradeTransaction" />
                                </Listeners>
                            </ext:Radio>
                        </Items>
                        <DirectEvents>
                            <Change OnEvent="rblPending_change">
                            </Change>
                        </DirectEvents>
                    </ext:RadioGroup>
                </td>
            </tr>
            <tr id="tr1" runat="server">
                <td>
                    <ext:Store ID="Store2" runat="server" OnRefreshData="MyData_Refresh">
                        <AutoLoadParams>
                            <ext:Parameter Name="start" Value="0" Mode="Raw" />
                            <ext:Parameter Name="limit" Value="20" Mode="Raw" />
                        </AutoLoadParams>
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="company" />
                                    <ext:RecordField Name="price" Type="Float" />
                                    <ext:RecordField Name="change" Type="Float" />
                                    <ext:RecordField Name="pctChange" Type="Float" />
                                    <ext:RecordField Name="lastChange" Type="Date" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                    <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" StoreID="Store2"
                        Title="Array Grid" AutoHeight="true" AutoExpandColumn="Company">
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:RowNumbererColumn />
                                <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company" />
                                <ext:Column Header="Price" Width="75" DataIndex="price">
                                </ext:Column>
                                <ext:Column Header="Change" Width="75" DataIndex="change">
                                </ext:Column>
                                <ext:Column Header="Change" Width="75" DataIndex="pctChange">
                                </ext:Column>
                                <ext:DateColumn Header="Last Updated" Width="85" DataIndex="lastChange" Format="H:mm:ss" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                        </SelectionModel>
                        <LoadMask ShowMask="true" />
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="20">
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:GridPanel>
                </td>
            </tr>
            <tr id="tr2" runat="server">
                <td>
                    <ext:Store ID="Store1" runat="server" OnRefreshData="MyData_Refresh">
                        <AutoLoadParams>
                            <ext:Parameter Name="start" Value="0" Mode="Raw" />
                            <ext:Parameter Name="limit" Value="20" Mode="Raw" />
                        </AutoLoadParams>
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="company" />
                                    <ext:RecordField Name="price" Type="Float" />
                                    <ext:RecordField Name="change" Type="Float" />
                                    <ext:RecordField Name="pctChange" Type="Float" />
                                    <ext:RecordField Name="lastChange" Type="Date" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                    <ext:GridPanel ID="GridPanel2" runat="server" StripeRows="true" StoreID="Store1"
                        Title="Array Grid" AutoHeight="true" AutoExpandColumn="Company">
                        <ColumnModel ID="ColumnModel2" runat="server">
                            <Columns>
                                <ext:RowNumbererColumn />
                                <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company" />
                                <ext:Column Header="Price" Width="75" DataIndex="price">
                                </ext:Column>
                                <ext:Column Header="Change" Width="75" DataIndex="change">
                                </ext:Column>
                                <ext:Column Header="Change" Width="75" DataIndex="pctChange">
                                </ext:Column>
                                <ext:DateColumn Header="Last Updated" Width="85" DataIndex="lastChange" Format="H:mm:ss" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" />
                        </SelectionModel>
                        <LoadMask ShowMask="true" />
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar2" runat="server" PageSize="20">
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:GridPanel>
                </td>
            </tr>
        </table>
        </form>
    </body>
    </html>
    P.S. In future please consider to use CardLayout instead table
    https://examples1.ext.net/#/Layout/CardLayout/Basic/
  9. #9
    Hi,

    We have applied the class as you have indicated earlier. It works fine in firefox and in IE8. However in IE7, the controls other than the grid view in the table are hidden. Please find attached the screen shot depicting the issue.

    Here is the code sample we have used.

    function ShowHideTradeTransaction()
    {
    if(rblPending.items.items[0].checked)
    {
       Ext.get('tblPending').removeClass("x-hide-offsets"); 
       Ext.get('tblTransaction').addClass("x-hide-offsets");
       Ext.get('tblExecute').addClass("x-hide-offsets");
       Ext.get('trAutotrade').addClass("x-hide-offsets");
       Ext.get('trBatch').addClass("x-hide-offsets");
      
    }
    else if(rblPending.items.items[1].checked)
    { 
       Ext.get('tblPending').addClass("x-hide-offsets"); 
       Ext.get('tblTransaction').removeClass("x-hide-offsets");
       Ext.get('tblExecute').addClass("x-hide-offsets");
       Ext.get('trAutotrade').addClass("x-hide-offsets");
       Ext.get('trBatch').addClass("x-hide-offsets");
       
    }
      else if(rblPending.items.items[2].checked)
      {
       Ext.get('tblPending').addClass("x-hide-offsets"); 
       Ext.get('tblTransaction').addClass("x-hide-offsets");
       Ext.get('tblExecute').removeClass("x-hide-offsets");
       Ext.get('trAutotrade').addClass("x-hide-offsets");
       Ext.get('trBatch').addClass("x-hide-offsets");
      }
      else if(rblPending.items.items[3].checked)
      {
       Ext.get('tblPending').addClass("x-hide-offsets"); 
       Ext.get('tblTransaction').addClass("x-hide-offsets");
       Ext.get('tblExecute').addClass("x-hide-offsets");
       Ext.get('trAutotrade').removeClass("x-hide-offsets");
       Ext.get('trBatch').addClass("x-hide-offsets");
      }
       else if(rblPending.items.items[4].checked)
      {
       Ext.get('tblPending').addClass("x-hide-offsets"); 
       Ext.get('tblTransaction').addClass("x-hide-offsets");
       Ext.get('tblExecute').addClass("x-hide-offsets");
       Ext.get('trAutotrade').addClass("x-hide-offsets");
       Ext.get('trBatch').removeClass("x-hide-offsets");   
      }
    }

    Looking forward your earliest reply.
    Attached Thumbnails Click image for larger version. 

Name:	IE7.jpg 
Views:	146 
Size:	100.5 KB 
ID:	1967   Click image for larger version. 

Name:	IE8.jpg 
Views:	133 
Size:	94.7 KB 
ID:	1968  
    Last edited by Daniil; Dec 01, 2010 at 6:06 AM. Reason: Please use [CODE] tags
  10. #10
    Hi,

    We can't say anything concrete without a sample to reproduce the screen-shots.

    I also, as Vladimir, recommend you to use CardLayout. In this way you could solve the current issue and avoid issues in the future.

Similar Threads

  1. Replies: 1
    Last Post: Apr 19, 2012, 12:35 PM
  2. Replies: 11
    Last Post: Feb 08, 2012, 8:18 AM
  3. Replies: 2
    Last Post: Oct 28, 2011, 6:44 AM
  4. Replies: 1
    Last Post: Oct 09, 2009, 3:46 AM
  5. Paging Tool Bar - NaN
    By Tbaseflug in forum 1.x Help
    Replies: 1
    Last Post: May 23, 2009, 10:06 AM

Posting Permissions