[CLOSED] [1.0] GridPanel Scroll bar doesn't render initially when the gird is inside Card

[chafikb]

Hi, I have a case where i have to put a GridPanel in the second step of a Wizard Layout (Card Layout). but i got a strange behaviour asthe grid doesn't render the scroller bar initially, untill i click on one of the columns header and sort it. while the same code of the same gridpanel does render the scrollbar when we put the GridPanel out of the wizard layout(the card layout).

please check the attached file which is the sample CardLayout basic example but modified to simulate my case.

thanks

[chafikb]

I solved the issue using


GridPanel1.Reconfigure();

when i am displaying the wizard card that has the grid.

let me know if there is another way to do so.

[Vladimir]

Hi,

Reconfigure is not required. Please set Layout="Fit" for the second panel or remove that panel and use GridPanel directly as item

<%@ 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.Store.Primary;

            object[] data = new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                new object[] { "AT&amp;T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                new object[] { "Johnson &amp; Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                new object[] { "JP Morgan &amp; Chase &amp; Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                new object[] { "Merck &amp; Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                new object[] { "The Procter &amp; Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
            };

            store.DataSource = data;
            store.DataBind();
        }
    }
    protected void Next_Click(object sender, DirectEventArgs e)
    {
        int index = int.Parse(e.ExtraParams["index"]);

        if ((index + 1) < this.WizardPanel.Items.Count)
        {
            this.WizardPanel.ActiveIndex = index + 1;
        }


        this.CheckButtons();
    }

    protected void Prev_Click(object sender, DirectEventArgs e)
    {
        int index = int.Parse(e.ExtraParams["index"]);

        if ((index - 1) >= 0)
        {
            this.WizardPanel.ActiveIndex = index - 1;
        }

        this.CheckButtons();
    }

    private void CheckButtons()
    {
        int index = this.WizardPanel.ActiveIndex;

        this.btnNext.Disabled = index == (this.WizardPanel.Items.Count - 1);
        this.btnPrev.Disabled = index == 0;

        if (index == 1)
        {
            WizardPanel.Height = Unit.Pixel(600);
        }
        else
        {
            WizardPanel.Height = Unit.Pixel(300);
        }
    }
</script>

<script type="text/javascript">
    var template='{1}';

    var change=function(value) {
        return String.format(template,(value>0)?"green":"red",value);
    };

    var pctChange=function(value) {
        return String.format(template,(value>0)?"green":"red",value+"%");
    };
</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>CardLayout - Ext.NET Examples</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Panel ID="WizardPanel" runat="server" Title="Example Wizard" Padding="15" Height="300"
        Width="800" Layout="card" ActiveIndex="0">
        <Items>
            <ext:Panel ID="Panel1" runat="server" Html="<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>"
                Border="false" Header="false" />
            <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Title="Array Grid"
                TrackMouseOver="true" Width="600" Height="350" AutoExpandColumn="Company">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <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" DateFormat="M/d hh:mmtt" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                        <ext:Column Header="Price" DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column Header="Change" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column Header="Change" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                </SelectionModel>
            </ext:GridPanel>
            <ext:Panel ID="Panel3" runat="server" Html="<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>"
                Border="false" Header="false" />
        </Items>
        <Buttons>
            <ext:Button ID="btnPrev" runat="server" Text="Prev" Disabled="true" Icon="PreviousGreen">
                <DirectEvents>
                    <Click OnEvent="Prev_Click">
                        <ExtraParams>
                            <ext:Parameter Name="index" Value="#{WizardPanel}.items.indexOf(#{WizardPanel}.layout.activeItem)"
                                Mode="Raw" />
                        </ExtraParams>
                    </Click>
                </DirectEvents>
            </ext:Button>
            <ext:Button ID="btnNext" runat="server" Text="Next" Icon="NextGreen">
                <DirectEvents>
                    <Click OnEvent="Next_Click">
                        <ExtraParams>
                            <ext:Parameter Name="index" Value="#{WizardPanel}.items.indexOf(#{WizardPanel}.layout.activeItem)"
                                Mode="Raw" />
                        </ExtraParams>
                    </Click>
                </DirectEvents>
            </ext:Button>
        </Buttons>
    </ext:Panel>
    </form>
</body>
</html>

[chafikb]

having the grid as second Item is fine if the case was to have only one element in the second item card, but when you need to show more than one element , grid, text fields, etc... then it can't. beside having the Layout="Fit" will ignore the width and height values i set to the GridPanel and will render the GridPanel in a way to fill all the parent item.

btw. i tried the method RefreshView() instead of Reconfigure() and i got it work as well.

i know that each method call deferent client side ExtJS function. but it looks both inforce the GridPanel instance at client side to get recalculated and render correctly.

[Vladimir]

Hi,

Just grid renders to the hidden area (inactive card). Hidden area has no size therefore grid cannot determine own size

Solutions
- add the following listener to the second panel

<Activate Handler="#{GridPanel1}.view.refresh();" Single="true"/>

or

- add the following LayoutConfig to the panel with Layout="card" (WizardPanel)

 <LayoutConfig>
            <ext:CardLayoutConfig DeferredRender="true" />
        </LayoutConfig>

[chafikb]

I think the DeferredRender is a suitable solution
thanks again