PDA

View Full Version : [CLOSED] Adding panels to a tab panel throws exception



RCM
Mar 08, 2012, 8:43 PM
Adding panels to a tab panel throws exception. This is the main tab panels. panels are added to thid dynamically from JS code



<ext:TabPanel
ID="tpMain"
runat="server"
Region="Center"
Margins="0 0 4 0"
EnableTabScroll="true" TabWidth="10px" TabPosition="Top">
<Items>
<ext:Panel
ID="HomeTab"
layout="Fit"
runat="server"
Title="<%$ Resources:WebResources|Home.FormLabels, Home %>"
Icon="ApplicationForm"
Border="false" AutoScroll="true">
<Listeners>

</Listeners>
</ext:Panel>
</Items>
<ToolTips>
<ext:ToolTip runat="server" Delegate="#tpMain__HomeTab" Html="Home" />
</ToolTips>
<Listeners>
<TabChange Fn="History.addToken" />
</Listeners>
</ext:TabPanel>






AddPanel: function(config)
var id="thePanel"
Ext.Function.defer(function () {

tab = tp.addTab({
id: id.toString(),
title: title,
layout: "fit",
tabTip: config.title,
iconCls: config.icon || 'icon-arrowmerge',
closable: isClosable,
autoStroll: true,
listeners: {

},
loader: {
url: "/ProcessManagement/ProcessManagement/",
loadMask: false,
scripts: true,
autoLoad: true,
passParentSize: true,
params:
{
"tabId": id.toString()
}
}

});
}, 100);
}






public class ProcessManagementController : Controller
{
//
// GET: /ProcessManagement/ProcessManagement/

public ActionResult Index()
{
return View();
}
}




it is failling here where is the option passed to this function coming from. Do i need to config it in the javascrip above




load : function (options) {
options = Ext.apply({}, options);

if (this.paramsFn) {
this.params = this.paramsFn();
}

if (!Ext.isDefined(options.passParentSize) && this.passParentSize) {
options.params = options.params || {};
.>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> failing here<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
options.params.width = this.body.getWidth(true);
options.params.height = this.body.getHeight(true);
}

if (this.renderer == "frame") {
this.loadFrame(options);
return;
}

if (this.directMethod) {
var me = this,
mask = Ext.isDefined(options.loadMask) ? options.loadMask : me.loadMask,
params = Ext.apply({}, options.params),
callback = options.callback || me.callback,
scope = options.scope || me.scope || me;

Ext.applyIf(params, me.params);
Ext.apply(params, me.baseParams);

Ext.apply(options, {
scope : me,
params : params,
callback : me.onComplete
});

if (me.fireEvent('beforeload', me, options) === false) {
return;
}

if (mask) {
me.addMask(mask);
}

Ext.decode(this.directMethod)(Ext.encode(options.p arams),{
complete : function (success, result, response) {
me.onComplete(options, success, {responseText: result});
}
});

me.active = {
options : options,
mask : mask,
scope : scope,
callback : callback,
success : options.success || me.success,
failure : options.failure || me.failure,
renderer : options.renderer || me.renderer,
scripts : Ext.isDefined(options.scripts) ? options.scripts : me.scripts
};

me.setOptions(me.active, options);

return;
}

Ext.net.ComponentLoader.superclass.load.apply(this , arguments);
},

Daniil
Mar 09, 2012, 8:36 AM
Hi,

Confirmed, thanks for the report.


passParentSize: true
causes the problem.

Here is the example with the fix.

Example Parent Page

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

<%@ 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 v2 Example</title>

<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

<script type="text/javascript">
Ext.net.ComponentLoader.override({
load : function (options) {
options = Ext.apply({}, options);

if (this.paramsFn) {
this.params = this.paramsFn();
}

if (options.paramsFn) {
options.params = Ext.apply(options.params || {}, options.paramsFn());
}

if (!Ext.isDefined(options.passParentSize) && this.passParentSize) {
options.params = options.params || {};
options.params.width = this.target.body.getWidth(true);
options.params.height = this.target.body.getHeight(true);
}

if (this.renderer == "frame") {
this.loadFrame(options);
return;
}

if (this.directMethod) {
var me = this,
mask = Ext.isDefined(options.loadMask) ? options.loadMask : me.loadMask,
params = Ext.apply({}, options.params),
callback = options.callback || me.callback,
scope = options.scope || me.scope || me;

Ext.applyIf(params, me.params);
Ext.apply(params, me.baseParams);

Ext.apply(options, {
scope : me,
params : params,
callback : me.onComplete
});

if (me.fireEvent('beforeload', me, options) === false) {
return;
}

if (mask) {
me.addMask(mask);
}

Ext.decode(this.directMethod)(Ext.encode(options.p arams),{
complete : function (success, result, response) {
me.onComplete(options, success, {responseText: result});
}
});

me.active = {
options : options,
mask : mask,
scope : scope,
callback : callback,
success : options.success || me.success,
failure : options.failure || me.failure,
renderer : options.renderer || me.renderer,
scripts : Ext.isDefined(options.scripts) ? options.scripts : me.scripts
};

me.setOptions(me.active, options);

return;
}

Ext.net.ComponentLoader.superclass.load.apply(this , arguments);
}
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Panel runat="server" Height="200" Width="200">
<Loader Mode="Frame" Url="Test.aspx" PassParentSize="true">
<LoadMask ShowMask="true" />
</Loader>
</ext:Panel>
</form>
</body>
</html>

Example Child Page

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

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

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Label1.Text = this.Request["width"] + " " + this.Request["height"];
}
</script>

<!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 v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Label ID="Label1" runat="server" />
</body>
</html>

Daniil
Mar 09, 2012, 9:14 AM
The fix has been added to SVN and will be publicly available in Beta 2 release.

RCM
Mar 09, 2012, 5:18 PM
Thanks. The exception is no longer happening. Now the call is getting to the Index controller that returns the page. But the page is not been rendered.

The page that will be added to the tab is has a dataview defined as follows




<ext:ResourceManager runat="server">
</ext:ResourceManager>
<div style="clear: both;">
</div>
<ext:Panel runat="server" Cls="items-view" Layout="fit" AutoHeight="true"
Border="false" ID="Thepanel" IDMode="Static">
<Items>
<ext:DataView runat="server" SingleSelect="true" OverClass="x-view-over" ItemSelector="div.items-ct"
AutoHeight="true" >
<Store>
<ext:Store runat="server" AutoLoad="true">
<Proxy>
<ext:AjaxProxy Url='<%# Html.GetUrl("Administration","Administration", "GetAdministratorMenu") %>' AutoDataBind="true">
<Reader>
<ext:JsonReader Root="">
</ext:JsonReader>
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server" IDProperty="Id" >
<Fields>
<ext:ModelField Name="Title" />
<ext:ModelField Name="Items" IsComplex="true" />
</Fields>
</ext:Model>
</Model>
<Listeners>
</Listeners>
</ext:Store>
</Store>
<Tpl runat="server">
<Html>
<div class="items-ct">
<tpl for=".">
<div>
<table style="width:95%; margin:25px 0px 0px 0px">
<tpl for="Items">
<tpl if="this.isOdd(xindex)">
<tr>
<td width="50%">

<div class="item-wrap" url="{Url}" isPopUp={IsPopUp} >
<div style='padding: 0 5px 5px 5px; float:left;'><img src='{Icon}' ext:qtip='{Title}'/> </div>
<div class="title">
{Title:htmlDecode}<br/>
</div>
<div style='padding: 0 5px 5px 5px; word-wrap: break-word;' class="description">
{Description:htmlDecode}
</div>
</div>
</td>
</tpl>
<tpl if="this.isOdd(xindex) && xcount == xindex">
<td width="50%">
<span class="title">&nbsp;</span>
</td>
</tr>
</tpl>
<tpl if="this.isEven(xindex)">
<td width="50%">

<div class="item-wrap" url="{Url}" isPopUp={IsPopUp} >
<div style='padding: 0 5px 5px 5px; float:left;'><img src='{Icon}' ext:qtip='{Title}'/> </div>
<div class="title">
{Title:htmlDecode}<br/>
</div>
<div style='padding: 0 5px 5px 5px; word-wrap: break-word;' class="description">
{Description:htmlDecode}
</div>
</div>
</td>
</tr>
</tpl>
</tpl>
</table>
</dl>
</div>
</tpl>
</div>
</Html>
<Functions>
<ext:JFunction Name="isOdd" Fn="function (i) { return i % 2 == 1; }" />
<ext:JFunction Name="isEven" Fn="function (i) { return i % 2 == 0; }" />
</Functions>
</Tpl>
<Listeners>

</Listeners>
</ext:DataView>
</Items>
<Listeners>

</Listeners>

</ext:Panel>


When I debugged with firefox. The returned page is



<body>
<div style="clear: both;">
</div>
<div id="Thepanel_Container"></div>
</body>



How can this issue be resolved. Strangely, I removed the dataview and added just a panel with an html attribute set to a string and the string was not rendered too. Seems like the ext component are not been processed.

Daniil
Mar 09, 2012, 6:28 PM
So, if the initial issue has been resolved (described in the thread title), please start a new forum thread.

I think the new problem is not related to the initial one.