What's New?

[CLOSED] What to "ajax" load user controls into center area of viewport

  1. #1
    Jun 18, 2012, 6:32 PM

    [CLOSED] What to "ajax" load user controls into center area of viewport

    Hi Guys,

    I am using MVC and what I want to achieve is as below:

    1. A panel which positioned to the center area of a viewport
    2. When I click on a button, I could get associated url and "ajax" load a user control into the panel mentioned above.
    3. The loaded content should be involved in layout, i.e., loaded content need to take up the whole width of its parent container, which is a panel.

    Currently, the main problem I am facing is that the loaded content couldn't take the whole width of its parent panel.

    Could you please give me a working example which fullfill the requirements listed above. Thank you very much.

    Regards,
    RCM
    Last edited by Daniil; Jun 21, 2012 at 9:50 PM. Reason: [CLOSED]
  2. #2
    Jun 18, 2012, 6:50 PM
    Please review Loader examples, for example
    https://examples2.ext.net/#/Loaders/...Direct_Method/
  3. #3
    Jun 18, 2012, 7:22 PM
    Hi,

    Here is another approach. Though I would also prefer 
    Mode="Component"
    Example View
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

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

<!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>Ext.Net.MVC v2 Example</title>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Viewport runat="server" Layout="BorderLayout">
        <Items>
            <ext:Panel runat="server" Region="North" Height="100">
                <Items>
                    <ext:Button runat="server" Text="Reload">
                        <Listeners>
                            <Click Handler="App.Panel1.reload();" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Panel>
            <ext:Panel 
                ID="Panel1" 
                runat="server" 
                Region="Center" 
                Layout="FitLayout">
                <Loader 
                    runat="server" 
                    Mode="Html" 
                    Url="/Test/PartialView1" 
                    Scripts="true">
                    <Params>
                        <ext:Parameter Name="containerId" Value="App.Panel1" Mode="Value" />
                    </Params>
                </Loader>
            </ext:Panel>
        </Items>
    </ext:Viewport>
</body>
</html>
    Example Partial View
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

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

<ext:Container 
    ID="Container1"
    runat="server" 
    IDMode="Static"
    StyleSpec="background-color: yellow;"
    Html='<%# DateTime.Now.Second %>'
    AutoDataBind="true" />
    Example Controller Action
    public Ext.Net.MVC.PartialViewResult PartialView1(string containerId)
{
    Ext.Net.MVC.PartialViewResult r = new Ext.Net.MVC.PartialViewResult();
    r.ContainerId = containerId;
    r.RenderMode = RenderMode.AddTo;
    r.SingleControl = true;
    return r;
}

    Just a note.

    Quote Originally Posted by RCM View Post
    1. A panel which positioned to the center area of a viewport
    Viewport has no "center region" term by iteself. BorderLayout has regions. You can set up BorderLayout for any Ext.NET container, not just for Viewport.
  4. #4
    Jun 18, 2012, 7:28 PM
    Quote Originally Posted by Vladimir View Post
    Please review Loader examples, for example
    https://examples2.ext.net/#/Loaders/...Direct_Method/
    Thank you very much for your information. I am currently trying to achieve it by call below javascript code:

    
                        Ext.Ajax.request({
                            params: {
                                containerId: 'MainContentPanel'
                            },
                            url: requestUrl,
                            success: function (response) {
                                eval(response.responseText);
                            }
                                    });

    The only problem I am facing is that loaded content doesn't take up its parent's whole width. I prefer doing this way because I can easily route a mvc url to its corresponding user control view.

    So, could you please let me know how I can stick on my current way and get rid of the layout problem. Tons of thanks.

    Regards,
    RCM
  5. #5
    Jun 18, 2012, 7:36 PM
    Quote Originally Posted by Daniil View Post
    Hi,

    Here is another approach. Though I would also prefer 
    Mode="Component"
    Example View
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

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

<!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>Ext.Net.MVC v2 Example</title>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Viewport runat="server" Layout="BorderLayout">
        <Items>
            <ext:Panel runat="server" Region="North" Height="100">
                <Items>
                    <ext:Button runat="server" Text="Reload">
                        <Listeners>
                            <Click Handler="App.Panel1.reload();" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Panel>
            <ext:Panel 
                ID="Panel1" 
                runat="server" 
                Region="Center" 
                Layout="FitLayout">
                <Loader 
                    runat="server" 
                    Mode="Html" 
                    Url="/Test/PartialView1" 
                    Scripts="true">
                    <Params>
                        <ext:Parameter Name="containerId" Value="App.Panel1" Mode="Value" />
                    </Params>
                </Loader>
            </ext:Panel>
        </Items>
    </ext:Viewport>
</body>
</html>
    Example Partial View
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

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

<ext:Container 
    ID="Container1"
    runat="server" 
    IDMode="Static"
    StyleSpec="background-color: yellow;"
    Html='<%# DateTime.Now.Second %>'
    AutoDataBind="true" />
    Example Controller Action
    public Ext.Net.MVC.PartialViewResult PartialView1(string containerId)
{
    Ext.Net.MVC.PartialViewResult r = new Ext.Net.MVC.PartialViewResult();
    r.ContainerId = containerId;
    r.RenderMode = RenderMode.AddTo;
    r.SingleControl = true;
    return r;
}

    Just a note.



    Viewport has no "center region" term by iteself. BorderLayout has regions. You can set up BorderLayout for any Ext.NET container, not just for Viewport.

    Thanks. I will try this approach.
  6. #6
    Jun 18, 2012, 8:47 PM
    Quote Originally Posted by RCM View Post
    Thank you very much for your information. I am currently trying to achieve it by call below javascript code:

    
                        Ext.Ajax.request({
                            params: {
                                containerId: 'MainContentPanel'
                            },
                            url: requestUrl,
                            success: function (response) {
                                eval(response.responseText);
                            }
                                    });

    The only problem I am facing is that loaded content doesn't take up its parent's whole width. I prefer doing this way because I can easily route a mvc url to its corresponding user control view.

    So, could you please let me know how I can stick on my current way and get rid of the layout problem. Tons of thanks.
    Please look at the example for MVC.

    Example View
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

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

<!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>Ext.Net.MVC v2 Example</title>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Panel
        runat="server"         
        Height="200" 
        Width="500"
        Layout="FitLayout"
        Title="Load Partial View">
        <Loader 
            runat="server" 
            Url="/Test/LoadPartialView"
            Mode="Component"
            RemoveAll="true">
            <LoadMask ShowMask="true" />
        </Loader>
        <Buttons>
            <ext:Button runat="server" Text="Reload" Icon="PluginGo">
                <Listeners>
                    <Click Handler="this.up('panel').load();" />
                </Listeners>
            </ext:Button>
        </Buttons>
    </ext:Panel>
</body>
</html>
    Example Partial View
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

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

<ext:Container 
    ID="Container1"
    runat="server" 
    IDMode="Static"
    StyleSpec="background-color: yellow;"
    Html='<%# DateTime.Now.Second %>'
    AutoDataBind="true" />
    Example Controller Action
    public ContentResult LoadPartialView()
{
    return Content(ComponentLoader.ToConfig("~/Views/Test/PartialView1.ascx"));
}

Similar Threads

  1. [CLOSED] How does "MaskCls" work for "AutoLoad" mask in panel control
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 19, 2012, 12:09 PM
  2. [CLOSED] TabPanel "TabCloseMenu" plug-in "CloseOtherTabsText" property not working
    By cleve in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 26, 2012, 11:29 AM
  3. [CLOSED] Ext.net v2 Beta release: Panel collapsed with CollapseMode="Mini" and Split="true"
    By supera in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: May 02, 2012, 5:37 PM
  4. [CLOSED] GridPanel: ServerSide Code Equivalent for "getSelectionModel().selectRow(0)" and "getView().focusRow(0)"
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 11, 2011, 2:42 AM
  5. When I try to Pass an ID in the " Store.Load({params: ( " my PAGING starts up with "NaN" as the first page...
    By RonaldR in forum 1.x Help
    Replies: 2
    Last Post: Jun 26, 2011, 1:59 AM

Tags for this Thread

Posting Permissions