[FIXED] [V0.6] Gridpanel inside a BorderLayout

[Chelonian]

Hi guys,

This piece of code works:

    <ext:Panel ID="Panel1" runat="server" Height="580">
        <Content>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <Center>
                    <ext:Panel ID="Panel4" runat="server" Title="Center">
                        <Content>
                            center
                        </Content>
                    </ext:Panel>
                </Center>
                <East Collapsible="true" Split="true">
                    <ext:Panel ID="Panel2" runat="server" Title="West" Width="175">
                        <Content>
                            east
                        </Content>
                    </ext:Panel>
                </East>
                <South Collapsible="true" Split="true">
                    <ext:Panel ID="Panel3" runat="server" Height="150" Title="South">
                        <Content>
                            south
                        </Content>
                    </ext:Panel>
                </South>
            </ext:BorderLayout>
        </Content>
    </ext:Panel>

And this one does not:

    <ext:Panel ID="Panel1" runat="server" Height="580">
        <Content>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <Center>
                    <ext:Panel ID="Panel4" runat="server" Title="Center">
                        <Content>
                            <ext:GridPanel ID="GridPanel1" runat="server" Title="Grid Panel">
                            </ext:GridPanel>
                            center
                        </Content>
                    </ext:Panel>
                </Center>
                <East Collapsible="true" Split="true">
                    <ext:Panel ID="Panel2" runat="server" Title="West" Width="175">
                        <Content>
                            east
                        </Content>
                    </ext:Panel>
                </East>
                <South Collapsible="true" Split="true">
                    <ext:Panel ID="Panel3" runat="server" Height="150" Title="South">
                        <Content>
                            south
                        </Content>
                    </ext:Panel>
                </South>
            </ext:BorderLayout>
        </Content>
    </ext:Panel>

I get an object reference error at design time and if i run the application anyway, when i navigate to the page that contains this piece of code everything is all messed up.

The problem goes away if i place the GridPanel outside the BorderLayout...

Pablo

[Vladimir]

Hi Chelonian,

The GridPanel can't be without Store and ColumnModel (may be we'll add exception throwing if one of these are absent)

[Chelonian]

Actually what I posted is a tiny and maybe not fully accurate example.

My webpage is a lot more complicated. I'm using a Store and the GridPanel has a ColumnModel, but the error is the same :(

Edit:

I created a little sample with a Store and a ColumnModel. The error appears only in design mode though and remains to be the same.

CodeBehind

        protected void Page_Load(object sender, EventArgs e)
        {
            Store1.DataSource = new object[] {
                                                new object[] {"Jake", "Chambers"},
                                                new object[] {"Roland", "Deschain"}
                                             };
            Store1.DataBind();
        }

ASPX

    <ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="FirstName" />
                    <ext:RecordField Name="LastName" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
                            
    <ext:Panel ID="Panel1" runat="server" Height="580">
        <Content>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <Center>
                    <ext:Panel ID="Panel4" runat="server" Title="Center">
                        <Content>
                            <ext:GridPanel ID="GridPanel1" runat="server" Title="Grid Panel"
                                StoreID="Store1" AutoWidth="true" AutoHeight="true">
                                <ColumnModel>
                                    <Columns>
                                        <ext:Column ColumnId="FirstName" Header="First Name" Sortable="true" DataIndex="FirstName" />
                                        <ext:Column ColumnId="LastName" Header="Last Name" Sortable="true" DataIndex="LastName" />
                                    </Columns>
                                </ColumnModel>
                            </ext:GridPanel>
                        </Content>
                    </ext:Panel>
                </Center>
                <East Collapsible="true" Split="true">
                    <ext:Panel ID="Panel2" runat="server" Title="West" Width="175">
                        <Content>
                            east
                        </Content>
                    </ext:Panel>
                </East>
                <South Collapsible="true" Split="true">
                    <ext:Panel ID="Panel3" runat="server" Height="150" Title="South">
                        <Content>
                            south
                        </Content>
                    </ext:Panel>
                </South>
            </ext:BorderLayout>
        </Content>
    </ext:Panel>

[Vladimir]

Does this example working for you?

<%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

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

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        this.MyData.DataSource = 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[] {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am"}
            };


        this.MyData.DataBind();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Coolite Example - Simple Array Grid</title>
    <link href="../../Css/examples.css" rel="stylesheet" type="text/css" />
    
    <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>

</head>
<body>
    <form id="form1" runat="server">
    
    <ext:ScriptManager ID="ScriptManager1" runat="server" StateProvider="None" />
    
    <h1>Array Grid Example</h1>
    
    <p>This example shows how to create a grid from Array data.</p>
    
    <ext:Store ID="MyData" 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="n/j h:ia" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
    
    <ext:Panel ID="Panel1" runat="server" Height="580">
        <Content>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <Center>
                    <ext:Panel ID="Panel4" runat="server" Title="Center">
                        <Content>
                            <ext:GridPanel 
                                ID="GridPanel2" 
                                runat="server" 
                                StoreID="MyData"
                                StripeRows="true"
                                Title="Array Grid"
                                AutoExpandColumn="Company"
                                Width="600" 
                                DisableSelection="true"
                                Height="350">
                                <ColumnModel ID="ColumnModel2" runat="server">
                                    <Columns>
                                        <ext:Column ColumnId="Company" Header="Company" Width="160" Sortable="true" DataIndex="company" />
                                        <ext:Column Header="Price" Width="75" Sortable="true" DataIndex="price">
                                            <Renderer Format="UsMoney" />
                                        </ext:Column>
                                        <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="change">
                                            <Renderer Fn="change" />
                                        </ext:Column>
                                        <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="pctChange">
                                            <Renderer Fn="pctChange" />
                                        </ext:Column>
                                        <ext:Column Header="Last Updated" Width="85" Sortable="true" DataIndex="lastChange">
                                            <Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
                                        </ext:Column>
                                    </Columns>
                                </ColumnModel>
                                <SelModel>
                                    <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" SingleSelect="true"></ext:RowSelectionModel>
                                </SelModel>
                            </ext:GridPanel>
                            center
                        </Content>
                    </ext:Panel>
                </Center>
                <East Collapsible="true" Split="true">
                    <ext:Panel ID="Panel2" runat="server" Title="West" Width="175">
                        <Content>
                            east
                        </Content>
                    </ext:Panel>
                </East>
                <South Collapsible="true" Split="true">
                    <ext:Panel ID="Panel3" runat="server" Height="150" Title="South">
                        <Content>
                            south
                        </Content>
                    </ext:Panel>
                </South>
            </ext:BorderLayout>
        </Content>
    </ext:Panel>
    
    <ext:GridPanel 
        ID="GridPanel1" 
        runat="server" 
        StoreID="MyData"
        StripeRows="true"
        Title="Array Grid"
        AutoExpandColumn="Company"
        Width="600" 
        DisableSelection="true"
        Height="350">
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column ColumnId="Company" Header="Company" Width="160" Sortable="true" DataIndex="company" />
                <ext:Column Header="Price" Width="75" Sortable="true" DataIndex="price">
                    <Renderer Format="UsMoney" />
                </ext:Column>
                <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="change">
                    <Renderer Fn="change" />
                </ext:Column>
                <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="pctChange">
                    <Renderer Fn="pctChange" />
                </ext:Column>
                <ext:Column Header="Last Updated" Width="85" Sortable="true" DataIndex="lastChange">
                    <Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
                </ext:Column>
            </Columns>
        </ColumnModel>
        <SelModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true"></ext:RowSelectionModel>
        </SelModel>
    </ext:GridPanel>    
    
    </form>
</body>
</html>

May be you can post your example (or attach to this topic) and we can investigate problem

[Chelonian]

It works as the example I posted in my previous post.

Runs fine at execution time, but it raises an object reference error at design time. Only the GridPanel inside the BorderLayout is the one that shows the error.

The Coolite version i'm testing with is 0.6.0.24865.

Thanks,
Pablo

[Vladimir]

May be I misunderstood you.

Do you have problems only at designer? The design-time doesn't support yet by GridPanel (we didn't implement design-time support for new controls)

If you have problems at runtime please let me know

[Chelonian]

Vladimir,

As I said, it appears that having a ColumnModel and a Store associated solved the problem at runtime but in design time, instead of having just a nice gray box that says the name of the grid and "Please Configure in Source View", I get a big square with rounded corners that displays an Exception raised by athe GridPanel contained inside a BorderLayout.

If i place the GridPanel outside the BorderLayout, everything is correct.

Anyway, not a big deal now that I know this happens only at design-time. I never use it anyway. Just got scared by the square with the exception :)

Thanks,
Pablo

[Vladimir]

Thanks Pablo.

Can you post text of Exception which displays in square with rounded corners?

[geoffrey.mcgill]

Hey Guys,

I think this is the same problem noted in the following thread, see*http://forums.ext.net/showthread.php...=1605-5-1.aspx


The fix has been checked into svn.*


As noted, the exception was thrown during Design-time only and does not affect the run-time of the controls.*


Chelonean, can you post your system details? I was not able to reproduce the design exception on my dev machines, so I'm interested to know exactly what your setup is.*


Operating System = ?
32 bit or 64 bit processor = ?
Visual Studio or Visual Web Developer = ? (and version #)
.NET 2.0, 3.0 or 3.5 = ?


Hope this helps.

[Chelonian]

Vlad,

This is the text of the exception:

Oops! A Desgin-Time Error has occured.
Error Message: Object reference not set to an instance of an object.

Stack Trace: at Coolite.Ext.Web.Ext.get_IsIE() at Coolite.Ext.Web.Ext.get_IsIE6() at Coolite.Ext.Web.GridPanelBase.SweepControls(WebControl item) at Coolite.Ext.Web.WebControl.OnInit(EventArgs e) at Coolite.Ext.Web.GridPanelBase.OnInit(EventArgs e) at System.Web.UI.Control.InitRecursive(Control namingContainer) at System.Web.UI.Control.AddedControl(Control control, Int32 index) at System.Web.UI.ControlCollection.Add(Control child) at System.Web.UI.Control.AddParsedSubObject(Object obj) at System.Web.UI.Control.System.Web.UI.IParserAccessor.AddParsedSubObject(Object obj) at System.Web.UI.ControlBuilder.BuildChildren(Object parentObj) at System.Web.UI.TemplateBuilder.InstantiateIn(Control container) at Coolite.Ext.Web.WebControl.OnInit(EventArgs e) at System.Web.UI.Control.InitRecursive(Control namingContainer) at System.Web.UI.Control.AddedControl(Control control, Int32 index) at System.Web.UI.ControlCollection.Add(Control child) at Coolite.Ext.Web.BorderLayoutDesigner.GetDesignTimeHtml(DesignerRegionCollection regions) at System.Web.UI.Design.ControlDesigner.GetViewRendering(ControlDesigner designer)

And a link to an image where you can see it in action: Error.jpg



Geoff,

This are my specs:

Operating System = Windows XP Professional SP3
32 bit or 64 bit processor = Core 2 Duo T7250 (64bits)

Visual Studio or Visual Web Developer = Visual Studio 2008 SP1

.NET 2.0, 3.0 or 3.5 = .Net Framework 3.5

Thanks,
Pablo