What's New?

[CLOSED] [1.0] [MVC] FitLayout doesn't work on grid inside partial view.

  1. #1
    Feb 15, 2010, 6:44 AM

    [CLOSED] [1.0] [MVC] FitLayout doesn't work on grid inside partial view.

    I'm loading a partial view into a panel. However, I can't get the grid to fit the screen. I have the feeling it has something to do with the store being inside the same panel as the grid. But if I were to move it elsewhere, the grid can't find it anymore. This also happens if I set Layout="Fit" on the grid.

    Controller action:

    public Ext.Net.MVC.PartialViewResult Child(string containerId)
{
    return new Ext.Net.MVC.PartialViewResult(containerId, RenderMode.AddTo);
}
    View:

    <ext:Viewport runat="server" AutoDataBind="true">
    <Items>
        <ext:BorderLayout runat="server">
            <North>
                <ext:Panel runat="server" Height="27" Border="false">
                    <Items>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Button runat="server" Text="Load Child">
                                    <Listeners>
                                        <Click Handler="#{ChildPanel}.load({ scripts: true, params: { containerId: #{ChildPanel}.id }, url: '/Home/Child' });" />
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </Items>
                </ext:Panel>
            </North>
            <Center>
                <ext:Panel ID="ChildPanel" runat="server" />
            </Center>
        </ext:BorderLayout>
    </Items>
</ext:Viewport>
    Partial view (Child.ascx):

    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<ext:FitLayout runat="server">
    <Items>
        <ext:Panel ID="Panel1" runat="server">
            <Content>
                <ext:Store ID="Store1" runat="server" AutoLoad="true">
                    <Reader>
                        <ext:JsonReader Root="data" TotalProperty="totalCount">
                            <Fields>
                                <ext:RecordField Name="Id" />
                                <ext:RecordField Name="Name" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                    <Proxy>
                        <ext:HttpProxy Url="/Home/TestData" />
                    </Proxy>
                </ext:Store>
                <ext:GridPanel runat="server" StoreID="Store1">
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column ColumnID="Id" Header="Id" DataIndex="Id" Width="80" />
                            <ext:Column ColumnID="Name" Header="Name" DataIndex="Name" Width="200" />
                        </Columns>
                    </ColumnModel>
                </ext:GridPanel>
            </Content>
        </ext:Panel>
    </Items>
</ext:FitLayout>
  2. #2
    Feb 15, 2010, 8:11 AM

    RE: [CLOSED] [1.0] [MVC] FitLayout doesn't work on grid inside partial view.

    Hi,

    1. Set Layout="Fit" for the ChildPanel (in the Center region)
    2. Use the following code for the partial view
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:FitLayout runat="server">
    <Items>
        <ext:Panel ID="Panel1" runat="server" Layout="Fit">
            <Items>               
                <ext:GridPanel runat="server">
                    <Store>
                        <ext:Store ID="Store1" runat="server" AutoLoad="true">
                            <Reader>
                                <ext:JsonReader Root="data" TotalProperty="totalCount">
                                    <Fields>
                                        <ext:RecordField Name="Id" />
                                        <ext:RecordField Name="Name" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>

                        </ext:Store>
                    </Store>
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column ColumnID="Id" Header="Id" DataIndex="Id" Width="80" />
                            <ext:Column ColumnID="Name" Header="Name" DataIndex="Name" Width="200" />
                        </Columns>
                    </ColumnModel>
                </ext:GridPanel>
            </Items>
        </ext:Panel>
    </Items>
</ext:FitLayout>
  3. #3
    Feb 15, 2010, 8:40 AM

    RE: [CLOSED] [1.0] [MVC] FitLayout doesn't work on grid inside partial view.

    Thanks. Meanwhile however, my view has become a bit more complex, it is wrapped in a BorderLayout now because I added a details panel. It was nice to learn that I could place a store within a grid. I guess now the BorderLayout is preventing the fit layouting though.

    I think I'll have to learn some more basics behind the layout process because I keep on hitting these kind of problems. 

    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<ext:FitLayout runat="server">
    <Items>
        <ext:Panel runat="server" Layout="Fit">
            <Items>
                <ext:BorderLayout runat="server">
                    <Center>
                        <ext:Panel runat="server" Layout="Fit" Title="List">
                            <Content>
                                <ext:Store ID="EmployerDetailsStore" runat="server" AutoLoad="false" SerializationMode="Simple">
                                    <Proxy>
                                        <ext:HttpProxy Method="GET" Url="/Employers/DetailsData" />
                                    </Proxy>
                                    <Reader>
                                        <ext:JsonReader Root="data">
                                            <Fields>
                                                <ext:RecordField Name="Id" />
                                                <ext:RecordField Name="EmployerNumber" />
                                                <ext:RecordField Name="Name" />
                                            </Fields>
                                        </ext:JsonReader>
                                    </Reader>
                                    <BaseParams>
                                        <ext:Parameter Name="Id" Value="#{EmployersGridPanel}.getSelectionModel().hasSelection() ? #{EmployersGridPanel}.getSelectionModel().getSelected().data.Id : -1" Mode="Raw" />
                                    </BaseParams>
                                    <Listeners>
                                        <DataChanged Handler="var record = this.getAt(0) || {}; #{EmployerDetailsFormPanel}.getForm().loadRecord(record);" />
                                    </Listeners>
                                </ext:Store>
                                <ext:GridPanel runat="server" ID="EmployersGridPanel" AutoExpandColumn="Name">
                                    <Store>
                                        <ext:Store ID="EmployersStore" runat="server" AutoLoad="true">
                                            <Reader>
                                                <ext:JsonReader Root="data" TotalProperty="totalCount">
                                                    <Fields>
                                                        <ext:RecordField Name="Id" />
                                                        <ext:RecordField Name="EmployerNumber" />
                                                        <ext:RecordField Name="Name" />
                                                    </Fields>
                                                </ext:JsonReader>
                                            </Reader>
                                            <Proxy>
                                                <ext:HttpProxy Url="/Employers/IndexData" />
                                            </Proxy>
                                        </ext:Store>
                                    </Store>
                                    <SelectionModel>
                                        <ext:RowSelectionModel runat="server" SingleSelect="true">
                                            <Listeners>
                                                <RowSelect Handler="#{EmployerDetailsStore}.reload();" Buffer="250" />
                                            </Listeners>
                                        </ext:RowSelectionModel>
                                    </SelectionModel>
                                    <ColumnModel runat="server">
                                        <Columns>
                                            <ext:Column ColumnID="EmployerNumber" Header="Nr" DataIndex="EmployerNumber" />
                                            <ext:Column ColumnID="Name" Header="Naam" DataIndex="Name" />
                                        </Columns>
                                    </ColumnModel>
                                    <BottomBar>
                                        <ext:PagingToolbar runat="server">
                                        </ext:PagingToolbar>
                                    </BottomBar>
                                </ext:GridPanel>
                            </Content>
                        </ext:Panel>
                    </Center>
                    <East>
                        <ext:Panel runat="server" Title="Details" Width="450">
                            <Items>
                                <ext:FitLayout runat="server">
                                    <Items>
                                        <ext:FormPanel ID="EmployerDetailsFormPanel" runat="server">
                                            <Items>
                                                <!-- ... -->
                                            </Items>
                                        </ext:FormPanel>
                                    </Items>
                                </ext:FitLayout>
                            </Items>
                        </ext:Panel>
                    </East>
                </ext:BorderLayout>
            </Items>
        </ext:Panel>
    </Items>
</ext:FitLayout>
  4. #4
    Feb 15, 2010, 8:47 AM

    RE: [CLOSED] [1.0] [MVC] FitLayout doesn't work on grid inside partial view.

    I forgot to mention that now the DetailsStore cannot be found because apparently it is in different scope opposed to the store in the grid.
  5. #5
    Feb 15, 2010, 9:05 AM

    RE: [CLOSED] [1.0] [MVC] FitLayout doesn't work on grid inside partial view.

    I found out that when I move the GridView up, to be the first items in under <Content>, the fitting works. I still have the problem with the DetailsStore, which cannot be found when I click on a row:

    <RowSelect Handler="#{EmployerDetailsStore}.reload();" Buffer="250" />
    Gives a JS-error: Ext.Get(...) is null or not an object.
  6. #6
    Feb 15, 2010, 9:10 AM

    RE: [CLOSED] [1.0] [MVC] FitLayout doesn't work on grid inside partial view.

    Try this
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:BorderLayout runat="server">
    <Center>
        <ext:Panel runat="server" Layout="Fit" Title="List">
            <Content>
                <ext:Store ID="EmployerDetailsStore" runat="server" AutoLoad="false" SerializationMode="Simple">
                    <Proxy>
                        <ext:HttpProxy Method="GET" Url="/Employers/DetailsData" />
                    </Proxy>
                    <Reader>
                        <ext:JsonReader Root="data">
                            <Fields>
                                <ext:RecordField Name="Id" />
                                <ext:RecordField Name="EmployerNumber" />
                                <ext:RecordField Name="Name" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                    <BaseParams>
                        <ext:Parameter Name="Id" Value="#{EmployersGridPanel}.getSelectionModel().hasSelection() ? #{EmployersGridPanel}.getSelectionModel().getSelected().data.Id : -1" Mode="Raw" />
                    </BaseParams>
                    <Listeners>
                        <DataChanged Handler="var record = this.getAt(0) || {}; #{EmployerDetailsFormPanel}.getForm().loadRecord(record);" />
                    </Listeners>
                </ext:Store>
            </Content>
            <Items>                
                <ext:GridPanel runat="server" ID="EmployersGridPanel" AutoExpandColumn="Name">
                    <Store>
                        <ext:Store ID="EmployersStore" runat="server" AutoLoad="true">
                            <Reader>
                                <ext:JsonReader Root="data" TotalProperty="totalCount">
                                    <Fields>
                                        <ext:RecordField Name="Id" />
                                        <ext:RecordField Name="EmployerNumber" />
                                        <ext:RecordField Name="Name" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                            <Proxy>
                                <ext:HttpProxy Url="/Employers/IndexData" />
                            </Proxy>
                        </ext:Store>
                    </Store>
                    <SelectionModel>
                        <ext:RowSelectionModel runat="server" SingleSelect="true">
                            <Listeners>
                                <RowSelect Handler="#{EmployerDetailsStore}.reload();" Buffer="250" />
                            </Listeners>
                        </ext:RowSelectionModel>
                    </SelectionModel>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column ColumnID="EmployerNumber" Header="Nr" DataIndex="EmployerNumber" />
                            <ext:Column ColumnID="Name" Header="Naam" DataIndex="Name" />
                        </Columns>
                    </ColumnModel>
                    <BottomBar>
                        <ext:PagingToolbar runat="server">
                        </ext:PagingToolbar>
                    </BottomBar>
                </ext:GridPanel>
            </Items>
        </ext:Panel>
    </Center>
    <East>
        <ext:Panel runat="server" Title="Details" Width="450" Layout="Fit">
            <Items>
                <ext:FormPanel ID="EmployerDetailsFormPanel" runat="server">
                    <Items>                       
                    </Items>
                </ext:FormPanel>
            </Items>
        </ext:Panel>
    </East>
</ext:BorderLayout>
  7. #7
    Feb 15, 2010, 9:15 AM

    RE: [CLOSED] [1.0] [MVC] FitLayout doesn't work on grid inside partial view.

    Fantastic! Works like a charm. My, you're fast!

    Thanks for helping me out here.

Similar Threads

  1. [CLOSED] Ext.Net.Mvc partial view result & MVC 3 doesn't seem to work
    By bogc in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jul 16, 2012, 10:57 PM
  2. Javascript not work in partial view mvc.ext.net
    By theblackcat_2902 in forum 1.x Help
    Replies: 9
    Last Post: Aug 24, 2011, 10:31 AM
  3. asp.net themes for controls inside a partial view
    By rsaldanhabr in forum 1.x Help
    Replies: 1
    Last Post: Aug 10, 2011, 8:05 AM
  4. Partial View Error inside TabPanel
    By David Pelaez in forum 1.x Help
    Replies: 1
    Last Post: Feb 07, 2011, 3:08 PM
  5. FitLayout and doesn't work in Firefox
    By moth1 in forum 1.x Help
    Replies: 1
    Last Post: Mar 30, 2010, 9:50 PM

Posting Permissions