[CLOSED] PartialExtView and GridPanel SelectionModel

**Timothy** · May 03, 2012, 8:44 PM

Hello,

The following code below generates the following error message in a PartialExtView over AJAX:

TypeError: ownerContext.target.ownerLayout is undefined

        a.Add(Html.X().GridPanel()
            .Height(250)
            .Title("Users")
            ...
            .SelectionModel(model =>
                model.Add(Html.X().RowSelectionModel())
            )
        )

If you remove the SelectionModel the error disappears.

Here is the JavaScript returned:


Ext.net.addTo("TabSetupUser", [{border:false,xtype:"panel",items:[{html:"\r\n\t\t\t\t<h2>Users</h2>\r\n\t\t\t\t<p>Use the following section to manage the <i>Users</i> on the application:</p>\r\n\t\t\t",xtype:"container"},{store:{model:Ext.define(Ext.id(), {extend: "Ext.data.Model", fields:[{name:"Id"},{name:"FirstName",type:"string"},{name:"LastName",type:"string"},{name:"Email"}] }),storeId:"idba4bc96f66d3f8f8",autoLoad:true,proxy:{type:"ajax",reader:{type:"json",idProperty:"Id",root:"data"},url:"/Management/User/Get"}},height:250,plugins:[{ptype:"rowediting"}],xtype:"grid",title:"Users",columns:{items:[{flex:1,dataIndex:"Email",text:"Email"}]},selModel:window.App.idd3ef8586fb35e1e7=Ext.create("Ext.selection.RowModel",{proxyId:"idd3ef8586fb35e1e7",selType:"rowmodel"})}]}]);

Using the latest SVN build.

Cheers,
Timothy

**Vladimir** · May 03, 2012, 9:09 PM

Where 'ownerContext.target.ownerLayout' code is located?

**Vladimir** · May 03, 2012, 9:11 PM

Sorry, found it, investigating

**Vladimir** · May 03, 2012, 9:14 PM

I made test sample and connato reproduce it
Here is my test case

View

@{
    Layout = "";        
}


@using Ext.Net
@using Ext.Net.MVC
<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewBag.Title - MVC-Ext.NET Application</title>
</head>
<body>
    @Html.X().ResourceManager()


    @Html.X().Panel().ID("Panel1").Title("Panel").Height(300).Width(300).Layout("fit")
    @(Html.X().Button().Text("Click")
        .DirectEvents(events => {
            events.Click.Url = "/Examples/PartialRazorView";
            events.Click.ExtraParams.Add(new Parameter("containerId", "Panel1"));
    }))
</body>
</html>

partial view

@(
 Html.X().GridPanel()    
    .Title("Users")
    .ColumnModel(model =>
    {
        model.Columns.Add(new Column { Text = "Column1", DataIndex = "Column1" });
    })
        .SelectionModel(model =>
            model.Add(Html.X().RowSelectionModel())
        )
    .Store(store => {
        store.Add(new Store
        {
            Model = { 
                new Model{
                    Fields = {
                        new ModelField("Column1")
                    }
                }
            }
        });
    })
)

Controller action

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

**Timothy** · May 04, 2012, 2:01 PM

I'm still receiving:


ownerContext.target.ownerLayout is undefined

a.Add(Html.X().TabPanel()
				.ID("TabsSetup")
				.AutoHeight(true)
				.Plain(true)
				.Width(800)
				.Items(b =>
				{
					b.Add(Html.X().Panel()
						.ID("TabSetupEmail")
						.Icon(Icon.Email)
						.Padding(10)
						.Title("Emails")
					);
					b.Add(Html.X().Panel()
						.ID("TabSetupUser")
						.Icon(Icon.Group)
						.Layout(Ext.Net.LayoutType.Fit)
						.Padding(10)
						.Title("Users")
						.DirectEvents(events =>
						{
							events.Activate.ExtraParams.Add(new Parameter
							{
								Name = "ContainerId",
								Value = "TabSetupUser"
							} );
							events.Activate.Method = HttpMethod.GET;
							events.Activate.Url = Url.Action("Load", "User", new { Area = "Management" } );
						} )
					);
				} )
			);

@(Html.X().Panel()
	.Border(false)
	.Items(a =>
	{
		a.Add(Html.X().Container()
			.Html(@"
				<h2>Users</h2>
			")
		);
		a.Add(Html.X().GridPanel()
			.Icon(Icon.Group)
			.Height(250)
			.Title("Users")
			.Store(store =>
				store.Add(Html.X().Store()
					.ID("Users")
					.PageSize(10)
					.Model(model =>
						model.Add(Html.X().Model()
							.Fields(fields =>
							{
								fields.Add(Html.X().ModelField()
									.Name("Id")
								);
								fields.Add(Html.X().ModelField()
									.Name("FirstName")
									.Type(ModelFieldType.String)
								);
								fields.Add(Html.X().ModelField()
									.Name("LastName")
									.Type(ModelFieldType.String)
								);
								fields.Add(Html.X().ModelField()
									.Name("Email")
								);
							} )
						)
					)
					.Proxy(proxy =>
						proxy.Add(Html.X().AjaxProxy()
							.Reader(reader =>
								reader.Add(Html.X().JsonReader()
									.IDProperty("Id")
									.Root("data")
								)
							)
							.Url(Url.Action("Get", "User", new { Area = "Management" } ) )
						)
					)
				)
			)
			.BottomBar(bar =>
				bar.Add(Html.X().PagingToolbar()
					.StoreID("Users")
				)
			)
			.ColumnModel(model =>
			{
				model.Add(Html.X().Column()
					.DataIndex("Email")
					.Flex(1)
					.Text("Email")
				);
			} )
			.SelectionModel(model =>
				model.Add(Html.X().RowSelectionModel())
			)
			.Plugins(plugin =>
			{
				plugin.Add(Html.X().RowEditing());
			} )
		);
	} )
	.Buttons(a =>
	{
		a.Add(Html.X().Button()
			.Icon(Icon.UserAdd)
			.Scale(ButtonScale.Medium)
			.Text("Add User")
			.Width(90)
		);
		a.Add(Html.X().Button()
			.ID("btnEditUser")
			.Disabled(true)
			.Icon(Icon.UserEdit)
			.Scale(ButtonScale.Medium)
			.Text("Edit User")
			.Width(90)
		);
		a.Add(Html.X().Button()
			.ID("btnDeleteUser")
			.Disabled(true)
			.Icon(Icon.UserDelete)
			.Scale(ButtonScale.Medium)
			.Text("Delete User")
			.Width(100)
		);
	} )
)

Also, if you run the above example and click on the "Users" tab multiple times the buttons at the bottom start to disappear.

Cheers,
Timothy

**Vladimir** · May 04, 2012, 2:18 PM

Hi,

ownerContext.target.ownerLayout is undefined

I cannot reproduce it. Please provide your test sample (exactly as you have). What browser do you use?

Also, if you run the above example and click on the "Users" tab multiple times the buttons at the bottom start to disappear.

We cannot autodestroy widgets under Razor (atleast now). Please add the following code for Activate event

events.Activate.Before = "this.removeAll(true);";

**Timothy** · May 04, 2012, 2:22 PM

Full example:

<!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>@ViewBag.Title</title>
	</head>
	<body>
		@(Html.X().ResourceManager()
			.IDMode(Ext.Net.IDMode.Static)
			.Theme(Ext.Net.Theme.Gray)
		)


		@(Html.X().Viewport()
			.Border(false)
			.Layout(Ext.Net.LayoutType.Fit)
			.Items(a =>
				a.Add(Html.X().Panel()
					.BodyStyle("background-color: #FFFFFF;")
					.Border(false)
					.Layout(Ext.Net.LayoutType.Border)
					.Items(b =>
					{
						b.Add(Html.X().Panel()
							.BodyCls("x-panel-custom-header")
							.Border(false)
							.ContentFromPage(this, "~/Areas/Management/Views/Shared/Content/Header.cshtml")
							.Height(209)
							.Region(Ext.Net.Region.North)
						);
						b.Add(Html.X().Panel()
							.BodyCls("x-panel-custom-fade")
							.Border(false)
							.ItemsFromSection(this, "Content")
							.Region(Ext.Net.Region.Center)
						);
					} )
				)
			)
		)
	</body>
</html>

@{
    ViewBag.Title = "Example";
    Layout = "~/Areas/Management/Views/Shared/Layout.cshtml";
}
@section Content {
	@(Html.X().Panel()
		.Border(false)
		.Padding(15)
		.Items(a =>
		{
			a.Add(Html.X().Container()
				.Html(@"
					<h1>Setup</h1>
				")
			);
			a.Add(Html.X().TabPanel()
				.ID("TabsSetup")
				.AutoHeight(true)
				.Plain(true)
				.Width(800)
				.Items(b =>
				{
					b.Add(Html.X().Panel()
						.ID("TabSetupEmail")
						.Icon(Icon.Email)
						.Padding(10)
						.Title("Emails")
					);
					b.Add(Html.X().Panel()
						.ID("TabSetupUser")
						.Icon(Icon.Group)
						.Layout(Ext.Net.LayoutType.Fit)
						.Padding(10)
						.Title("Users")
						.DirectEvents(events =>
						{
							events.Activate.ExtraParams.Add(new Parameter
							{
								Name = "ContainerId",
								Value = "TabSetupUser"
							} );
							events.Activate.Method = HttpMethod.GET;
							events.Activate.Url = Url.Action("Load", "User", new { Area = "Management" } );
						} )
					);
				} )
			);
		} )
	)
}

@(Html.X().Panel()
	.Border(false)
	.Items(a =>
	{
		a.Add(Html.X().Container()
			.Html(@"
				<h2>Users</h2>
			")
		);
		a.Add(Html.X().GridPanel()
			.Icon(Icon.Group)
			.Height(250)
			.Title("Users")
			.Store(store =>
				store.Add(Html.X().Store()
					.ID("Users")
					.PageSize(10)
					.Model(model =>
						model.Add(Html.X().Model()
							.Fields(fields =>
							{
								fields.Add(Html.X().ModelField()
									.Name("Id")
								);
								fields.Add(Html.X().ModelField()
									.Name("FirstName")
									.Type(ModelFieldType.String)
								);
								fields.Add(Html.X().ModelField()
									.Name("LastName")
									.Type(ModelFieldType.String)
								);
								fields.Add(Html.X().ModelField()
									.Name("Email")
								);
							} )
						)
					)
					.Proxy(proxy =>
						proxy.Add(Html.X().AjaxProxy()
							.Reader(reader =>
								reader.Add(Html.X().JsonReader()
									.IDProperty("Id")
									.Root("data")
								)
							)
							.Url(Url.Action("Get", "User", new { Area = "Management" } ) )
						)
					)
				)
			)
			.BottomBar(bar =>
				bar.Add(Html.X().PagingToolbar()
					.StoreID("Users")
				)
			)
			.ColumnModel(model =>
			{
				model.Add(Html.X().Column()
					.DataIndex("Email")
					.Flex(1)
					.Text("Email")
				);
			} )
			.Plugins(plugins =>
			{
				plugins.Add(Html.X().RowEditing());
			} )
		);
	} )
	.Buttons(buttons =>
	{
		buttons.Add(Html.X().Button()
			.Icon(Icon.UserAdd)
			.Scale(ButtonScale.Medium)
			.Text("Add User")
			.Width(90)
		);
		buttons.Add(Html.X().Button()
			.ID("btnEditUser")
			.Disabled(true)
			.Icon(Icon.UserEdit)
			.Scale(ButtonScale.Medium)
			.Text("Edit User")
			.Width(90)
		);
		buttons.Add(Html.X().Button()
			.ID("btnDeleteUser")
			.Disabled(true)
			.Icon(Icon.UserDelete)
			.Scale(ButtonScale.Medium)
			.Text("Delete User")
			.Width(100)
		);
	} )
)

Thanks for the comment on the destroy; I completely understand and I figured I would have to destroy on my own. Just thought I would check :)

Cheers,
Timothy Grant Vogelsang

**Timothy** · May 04, 2012, 2:27 PM

Sorry! I removed the SelectionModel from my program, just put in:

.SelectionModel(model =>
model.Add(Html.X().RowSelectionModel())
)

On the last file -- sorry :(

Cheers,
Timothy

**Vladimir** · May 04, 2012, 3:13 PM

Thanks for the sample
Fixed in SVN

**Timothy** · May 04, 2012, 3:48 PM

Confirmed, thanks!

Cheers,
Timothy

Thread: [CLOSED] PartialExtView and GridPanel SelectionModel

Thread Tools

Search Thread

Display

[CLOSED] PartialExtView and GridPanel SelectionModel

Similar Threads

[CLOSED] PartialExtView GridPanel Title

[CLOSED] GridPanel custom SelectionModel for GridPanel like web email clients

[CLOSED] GridPanel: selectionModel

[CLOSED] GridPanel and SelectionModel

[CLOSED] GridPanel SelectionModel

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] PartialExtView and GridPanel SelectionModel

[CLOSED] PartialExtView and GridPanel SelectionModel

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us