[OPEN] [#39] [2.0] GridPanel in Accordion

[Timothy]

Hello,

The following example demonstrates a layout issue with a GridPanel inside of an Accordion control:

@model Suite.Entity.Customer
@{
    ViewBag.Title = "Word";
    Layout = "~/Areas/Management/Views/Shared/Layout.cshtml";
}


@(Html.X().Viewport()
    .Border(false)
    .Layout(LayoutType.Fit)
    .Items(a =>
    {
        a.Add(Html.X().Panel()
            .Layout(LayoutType.Accordion)
            .Items(b =>
            {
                b.Add(Html.X().Panel()
                    .Title("Accordion 1")
                );


                b.Add(Html.X().Panel()
                    .BodyPadding(15)
                    .Title("Accordion  2")
                    .Items(c =>
                    {
                        c.Add(Html.X().GridPanel()
                            .Height(255)
                            .ColumnModel(columns =>
                            {
                                columns.Add(Html.X().Column()
                                    .Flex(1)
                                    .Text("Column 1")
                                );
                            } )
                        );
                    } )
                );
            } )
        );
    } )
)

If you run the same example, without the accordion, the GridPanel lays out correctly:

@model Suite.Entity.Customer
@{
    ViewBag.Title = "Word";
    Layout = "~/Areas/Management/Views/Shared/Layout.cshtml";
}


@(Html.X().Viewport()
    .Border(false)
    .Layout(LayoutType.Fit)
    .Items(a =>
    {
        a.Add(Html.X().Panel()
            .BodyPadding(15)
            .Title("Accordion  2")
            .Items(c =>
            {
                c.Add(Html.X().GridPanel()
                    .Height(255)
                    .ColumnModel(columns =>
                    {
                        columns.Add(Html.X().Column()
                            .Flex(1)
                            .Text("Column 1")
                        );
                    } )
                );
            } )
        );
    } )
)

Using Gray theme FF/IE/Chrome

Cheers,
Timothy

[Daniil]

Hi,

Do you mean the horizontal scrollbar?

It looks a bug, I have reported it to Sencha.
http://www.sencha.com/forum/showthread.php?227137

Lets wait what they will answer.

[Daniil]

Sencha has opened a bug ticket. I will monitor.

Do you need a workaround for now? We are unable to find yet.

[Timothy]

Sencha has opened a bug ticket. I will monitor.

Do you need a workaround for now? We are unable to find yet.

Hello Daniil,

It looks like it's more than just the scroll bar, I don't think the actual column and rows are laying out either. I've bound some data to the grid and it's not showing. I'm going to try wrapping the GridPanel in an additional Panel within the Accordion to see if that works this morning.

Thanks for opening the ticket, let me know. Also, if it gets resolved by Sencha I'll need to know which branch it's applied to; 2.0 or 2.1.

Cheers,
Timothy

[Timothy]

Adding an additional Panel around the GridPanel does not make a difference.

Cheers,
Timothy

[Daniil]

if it gets resolved by Sencha I'll need to know which branch it's applied to; 2.0 or 2.1.

Yes, I will let you know.

[Timothy]

Any updates?

Cheers

[Daniil]

Hi Timothy,

We are planing to update ExtJS to 4.1.1 in Ext.NET v2.1. So, if it will be fixed in ExtJS 4.1.1, the fix will be included in Ext.NET v2.1. If not, in some further releases, depends on Sencha.

[maxoptimus]

this work for me fine

<View>
<ext:GridView style="width:100%"/>
</View>

[Daniil]

Hi @maxoptimus,

Thank you for sharing!

I am surprised that it is not fixed by Sencha yet.