[CLOSED] South Panel rendering issue after gridPanel row select

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] South Panel rendering issue after gridPanel row select

    Hi,
    We implemented a gridPanel hanving a RowSelect listener to expand south panel and to load south panel content with a [FormPanel implemented programmatically].
    We reproduced the issue in the code implemented bellow :
    GridPanel ascx code :
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <ext:Panel ID="Panel1" runat="server" Height="250">
        <Items>
            <ext:ColumnLayout ID="_columnLayoutProfileGrid" runat="server" FitHeight="true">
                <Columns>
                    <ext:LayoutColumn ColumnWidth="0.5">
                        <ext:GridPanel ID="_groupGrid" ClientIDMode="Static" runat="server" EnableDragDrop="false"
                            AutoExpandColumn="_groupShortName" AutoDoLayout="true">
                            <View>
                                <ext:GridView ID="_gridViewGroup" runat="server" ForceFit="true" />
                            </View>
                            <Store>
                                <ext:Store ID="_dsUsrGroup" runat="server" AutoLoad="true">
                                    <Proxy>
                                        <ext:HttpProxy Url="/Research/GetGroupsList" />
                                    </Proxy>
                                    <Reader>
                                        <ext:JsonReader IDProperty="GroupId" Root="data" TotalProperty="total">
                                            <Fields>
                                                <ext:RecordField Name="GroupId">
                                                </ext:RecordField>
                                                <ext:RecordField Name="GoupName">
                                                </ext:RecordField>
                                                <ext:RecordField Name="Supervisor">
                                                </ext:RecordField>
                                            </Fields>
                                        </ext:JsonReader>
                                    </Reader>
                                    <BaseParams>
                                        <ext:Parameter Name="limit" Value="15" Mode="Raw" />
                                        <ext:Parameter Name="start" Value="0" Mode="Raw" />
                                    </BaseParams>
                                </ext:Store>
                            </Store>
                            <ColumnModel ID="_columnModelGroupGrid" runat="server">
                                <Columns>
                                    <ext:Column ColumnID="_groupId" Header="Id" DataIndex="GroupId" />
                                    <ext:Column ColumnID="_groupShortName" Header="Group Shortname" DataIndex="GoupName">
                                    </ext:Column>
                                    <ext:CheckColumn ColumnID="_groupSupervisor" DataIndex="Supervisor" Header="Supervisor"
                                        Editable="true" Hidden="true">
                                    </ext:CheckColumn>
                                </Columns>
                            </ColumnModel>
                            <SelectionModel>
                                <ext:RowSelectionModel ID="_rowSelectionModelGroupGrid" runat="server" SingleSelect="true">
                                    <Listeners>
                                        <RowSelect Handler="showSouthPanel();" />
                                    </Listeners>
                                </ext:RowSelectionModel>
                            </SelectionModel>
                            <BottomBar>
                                <ext:PagingToolbar ID="_pagingToolbarGroupGrid" runat="server" PageSize="15" />
                            </BottomBar>
                            <LoadMask ShowMask="true" />
                        </ext:GridPanel>
                    </ext:LayoutColumn>
                </Columns>
            </ext:ColumnLayout>
        </Items>
    </ext:Panel>
    Partial that loads FormPanelView:
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <ext:Panel ID="_pnlForm" runat="server" Border="false" Header="false" Layout="FitLayout">
        <AutoLoad Url="/Research/LoadFP" NoCache="true">
            <Params>
                <ext:Parameter Name="containerID" Value="#{_pnlForm}" Mode="Value" />
            </Params>
        </AutoLoad>
    </ext:Panel>
    ASPX code that loads gridPanel and formPanelView :
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <script type="text/javascript">
            var showSouthPanel = function () {
                Ext.get("_pnlSouthForm").load(
                        {
                            url: "/Research/FormPanelView?containerID=_pnlSouthForm",
                            text: "loading",
                            scripts: true
                        }
                    );
                _pnlSouthForm.expand();
            };
        </script>
    </head>
    <ext:ResourceManager runat="server">
    </ext:ResourceManager>
    <body>
        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel runat="server" ID="_gridPnl" Border="false" Header="false" Region="Center">
                    <AutoLoad Url="/Research/Grid1" NoCache="true">
                        <Params>
                            <ext:Parameter Name="containerID" Value="#{_gridPnl}" Mode="Value" />
                        </Params>
                    </AutoLoad>
                </ext:Panel>
                <ext:Panel ID="_pnlSouthForm" runat="server" Border="false" Header="false" Region="South"
                    AutoScroll="true" Height="250" Collapsible="true" Collapsed="true" TitleCollapse="true">
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    Controller Code :
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using Ext.Net.MVC;
    using Ext.Net;
    using System.Collections.ObjectModel;
    using System.Data;
    
    namespace Presentation.Controllers
    {
        public class Group
        {
            int groupId;
    
            public int GroupId
            {
                get { return groupId; }
                set { groupId = value; }
            }
            String goupName;
    
            public String GoupName
            {
                get { return goupName; }
                set { goupName = value; }
            }
    
            private Boolean supervisor;
    
            public Boolean Supervisor
            {
                get { return supervisor; }
                set { supervisor = value; }
            }
        }
        public class ResearchController : Controller
        {
      
            public AjaxStoreResult GetGroupsList()
            {
                List<Group> groups = new List<Group>();
                Group group = new Group();
                group.GroupId = 1;
                group.GoupName = "Group";
                groups.Add(group);
                Group group2 = new Group();
                group2.GroupId = 2;
                group2.GoupName = "Group 2";
                groups.Add(group2);
                AjaxStoreResult result = new AjaxStoreResult();
                result.Data = groups;
                return result;
            }
    
            public ActionResult Grid1(String containerID)
            {
                Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult(containerID);
                pr.RenderMode = RenderMode.AddTo;
                pr.SingleControl = true;
                return pr;
            }
    
            public ActionResult Research()
            {
                return View();
            }
    
            public FormPanel CreateFP()
            {
                FormPanel fp = new FormPanel();
                fp.ID = "_fp";
                TextField txtField = new TextField();
                txtField.FieldLabel = "Txt";
                txtField.Text = "test";
                Button btn = new Button();
                btn.Text = "click";
                btn.ID = "_btn";
                fp.Items.Add(txtField);
                fp.Items.Add(btn);
                return fp;
            }
    
            public ContentResult LoadFP(String containerID)
            {
                ContentResult cr = new ContentResult();
                cr.Content = string.Format("<script>{0}</script>",
                    CreateFP().ToScript(
                    RenderMode.AddTo,
                    containerID));
    
                return cr;
            }
    
            public ActionResult FormPanelView(String containerID)
            {
                Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult(containerID);
                pr.RenderMode = RenderMode.AddTo;
                pr.SingleControl = true;
                return pr;
            }
    
        }
    }
    Thank you in advance.
    Last edited by Daniil; May 01, 2012 at 9:48 AM. Reason: [CLOSED]
  2. #2
    Hi,

    I think you replace
    Ext.get("_pnlSouthForm").load({ ... });
    with
    _pnlSouthForm.load({ ... });
    The Ext.get method doesn't return a component reference.
    http://docs.sencha.com/ext-js/3-4/#!/api/Ext-method-get

    You can use the Ext.NET feature to refer a component directly via its client id (as shown above) or use the Ext.getCmp method.
    http://docs.sencha.com/ext-js/3-4/#!...-method-getCmp
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi,

    I think you replace
    Ext.get("_pnlSouthForm").load({ ... });
    with
    _pnlSouthForm.load({ ... });
    The Ext.get method doesn't return a component reference.
    http://docs.sencha.com/ext-js/3-4/#!/api/Ext-method-get

    You can use the Ext.NET feature to refer a component directly via its client id (as shown above) or use the Ext.getCmp method.
    http://docs.sencha.com/ext-js/3-4/#!...-method-getCmp
    Hi again, I setted up this line
    _pnlSouthForm.load({ ... });
    when I click on gridPanel row the formPanel content is shown but the south panel is hidden.
  4. #4
    Hi,

    I would set up
    Layout="FitLayout"
    for the _pnlSouthForm.

    And call the expand method before the load one.

    Example
    var showSouthPanel = function () {
        _pnlSouthForm.expand();
        _pnlSouthForm.load({
            url     : "/Test/FormPanelView?containerID=_pnlSouthForm",
            scripts : true
        });
    };
  5. #5
    Quote Originally Posted by Daniil View Post
    Hi,

    I would set up
    Layout="FitLayout"
    for the _pnlSouthForm.

    And call the expand method before the load one.

    Example
    var showSouthPanel = function () {
        _pnlSouthForm.expand();
        _pnlSouthForm.load({
            url     : "/Test/FormPanelView?containerID=_pnlSouthForm",
            scripts : true
        });
    };
    Hi I setted up the configuration above but the error not yet fixed .
  6. #6
    Please replace
    url : "/Test/FormPanelView?containerID=_pnlSouthForm",
    with
    url : "/Research/FormPanelView?containerID=_pnlSouthForm",
  7. #7
    Quote Originally Posted by Daniil View Post
    Please replace
    url : "/Test/FormPanelView?containerID=_pnlSouthForm",
    with
    url : "/Research/FormPanelView?containerID=_pnlSouthForm",
    Yes I know the same error occurred, when I click on the gridpanel row the formpanel is shown without the southpanel container and when I clik on the second row the formPanel is hidden
  8. #8
    Please clarify what exactly error? Do you mean the fact that the South panel is hidden? I was unable to reproduce it with the last changes which I suggested.

    Please provide a full sample how you are trying now.
  9. #9
    This is a full sample :
    GridPanel view :
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <ext:Panel ID="Panel1" runat="server" Height="250">
        <Items>
            <ext:ColumnLayout ID="_columnLayoutProfileGrid" runat="server" FitHeight="true">
                <Columns>
                    <ext:LayoutColumn ColumnWidth="0.5">
                        <ext:GridPanel ID="_groupGrid" ClientIDMode="Static" runat="server" EnableDragDrop="false"
                            AutoExpandColumn="_groupShortName" AutoDoLayout="true">
                            <View>
                                <ext:GridView ID="_gridViewGroup" runat="server" ForceFit="true" />
                            </View>
                            <Store>
                                <ext:Store ID="_dsUsrGroup" runat="server" AutoLoad="true">
                                    <Proxy>
                                        <ext:HttpProxy Url="/Research/GetGroupsList" />
                                    </Proxy>
                                    <Reader>
                                        <ext:JsonReader IDProperty="GroupId" Root="data" TotalProperty="total">
                                            <Fields>
                                                <ext:RecordField Name="GroupId">
                                                </ext:RecordField>
                                                <ext:RecordField Name="GoupName">
                                                </ext:RecordField>
                                                <ext:RecordField Name="Supervisor">
                                                </ext:RecordField>
                                            </Fields>
                                        </ext:JsonReader>
                                    </Reader>
                                    <BaseParams>
                                        <ext:Parameter Name="limit" Value="15" Mode="Raw" />
                                        <ext:Parameter Name="start" Value="0" Mode="Raw" />
                                    </BaseParams>
                                </ext:Store>
                            </Store>
                            <ColumnModel ID="_columnModelGroupGrid" runat="server">
                                <Columns>
                                    <ext:Column ColumnID="_groupId" Header="Id" DataIndex="GroupId" />
                                    <ext:Column ColumnID="_groupShortName" Header="Group Shortname" DataIndex="GoupName">
                                    </ext:Column>
                                    <ext:CheckColumn ColumnID="_groupSupervisor" DataIndex="Supervisor" Header="Supervisor"
                                        Editable="true" Hidden="true">
                                    </ext:CheckColumn>
                                </Columns>
                            </ColumnModel>
                            <SelectionModel>
                                <ext:RowSelectionModel ID="_rowSelectionModelGroupGrid" runat="server" SingleSelect="true">
                                    <Listeners>
                                        <RowSelect Handler="showSouthPanel();" />
                                    </Listeners>
                                </ext:RowSelectionModel>
                            </SelectionModel>
                            <BottomBar>
                                <ext:PagingToolbar ID="_pagingToolbarGroupGrid" runat="server" PageSize="15" />
                            </BottomBar>
                            <LoadMask ShowMask="true" />
                        </ext:GridPanel>
                    </ext:LayoutColumn>
               </Columns>
            </ext:ColumnLayout>
        </Items>
    </ext:Panel>
    Aspx page that loads grid and southpanel:

    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <script type="text/javascript">
            var showSouthPanel = function () {
                _pnlSouthForm.expand();
                _pnlSouthForm.load(
                        {
                            url: "/Research/FormPanelView?containerID=_pnlSouthForm",
                            scripts: true
                        });
            };
        </script>
    </head>
    <ext:ResourceManager runat="server">
    </ext:ResourceManager>
    <body>
        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel runat="server" ID="_gridPnl" Border="false" Header="false" Region="Center">
                    <AutoLoad Url="/Research/Grid1" NoCache="true">
                        <Params>
                            <ext:Parameter Name="containerID" Value="#{_gridPnl}" Mode="Value" />
                        </Params>
                    </AutoLoad>
                </ext:Panel>
                <ext:Panel ID="_pnlSouthForm" runat="server" Border="false" Header="false" Region="South"
                    AutoScroll="true" Height="250" Collapsible="true" Collapsed="true" TitleCollapse="true"
                    Layout="FitLayout">
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    Controller Code:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using Ext.Net.MVC;
    using Ext.Net;
    using System.Collections.ObjectModel;
    using System.Data;
    
    
    namespace Presentation.Controllers
    {
        public class Group
        {
            int groupId;
    
            public int GroupId
            {
                get { return groupId; }
                set { groupId = value; }
            }
            String goupName;
    
            public String GoupName
            {
                get { return goupName; }
                set { goupName = value; }
            }
    
            private Boolean supervisor;
    
            public Boolean Supervisor
            {
                get { return supervisor; }
                set { supervisor = value; }
            }
        }
        public class ResearchController : Controller
        {
            public AjaxStoreResult GetGroupsList()
            {
                List<Group> groups = new List<Group>();
                Group group = new Group();
                group.GroupId = 1;
                group.GoupName = "Group";
                groups.Add(group);
                Group group2 = new Group();
                group2.GroupId = 2;
                group2.GoupName = "Group 2";
                groups.Add(group2);
                AjaxStoreResult result = new AjaxStoreResult();
                result.Data = groups;
                return result;
            }
    
            public ActionResult Grid1(String containerID)
            {
                Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult(containerID);
                pr.RenderMode = RenderMode.AddTo;
                pr.SingleControl = true;
                return pr;
            }
    
            public ActionResult Research()
            {
                return View();
            }
    
            public FormPanel CreateFP()
            {
                FormPanel fp = new FormPanel();
                fp.ID = "_fp";
                TextField txtField = new TextField();
                txtField.FieldLabel = "Txt";
                txtField.Text = "test";
                Button btn = new Button();
                btn.Text = "click";
                btn.ID = "_btn";
                fp.Items.Add(txtField);
                fp.Items.Add(btn);
                return fp;
            }
    
            public ContentResult LoadFP(String containerID)
            {
                ContentResult cr = new ContentResult();
                cr.Content = string.Format("<script>{0}</script>",
                    CreateFP().ToScript(
                    RenderMode.AddTo,
                    containerID));
    
                return cr;
            }
    
            public ActionResult FormPanelView(String containerID)
            {
                Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult(containerID);
                pr.RenderMode = RenderMode.AddTo;
                pr.SingleControl = true;
                return pr;
            }
    
        }
    }
  10. #10
    Well, I still can't to reproduce.

    What exactly are steps to reproduce?

    Is the issue reproducible when you select a row at the first time? Or only next times?

    Well, you should remove all items before loading new ones.

    Example
    var showSouthPanel = function () {
        _pnlSouthForm.removeAll();
        _pnlSouthForm.expand();
        _pnlSouthForm.load({
            url     : "/Research/FormPanelView?containerID=_pnlSouthForm",
            scripts : true
        });
    };
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 2
    Last Post: Feb 21, 2011, 5:22 AM
  2. [CLOSED] Grid Panel Select and Unselect Issue
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 06, 2010, 9:39 AM
  3. [CLOSED] Collapsed title of South Panel
    By sz_146 in forum 1.x Help
    Replies: 5
    Last Post: Feb 26, 2010, 5:07 PM
  4. Replies: 15
    Last Post: Jul 29, 2009, 4:28 PM
  5. [CLOSED] Issue with gridpanel rendering within a fit layout
    By Dave.Sanders in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 22, 2008, 6:42 PM

Posting Permissions