View Full Version : [CLOSED] ComponentLoader inconsistency

Apr 11, 2012, 2:58 PM
Hi folks, im writing in relation to an issue that is driving me crazy

I have 2 GridPanels when i call the method ComponentLoader.ToJason i get the following results when pass them as parameters

Result 1:

{store:{model:Ext.define(Ext.id(), {extend: "Ext.data.Model", fields:[{name:"ID"}],idProperty:"ID" }),storeId:"_str",proxy:{type:"ajax",url:"/Ctrl/Method/",actionMethods:Ext.apply({}, {read:"POST"}, Ext.data.proxy.Ajax.prototype.actionMethods)},remo teSort:true},id:"_grd",height:200,xtype:"grid",region:"center",split:true,iconCls:"#Accept",title:"example",columns:{items:[{id:"ID",dataIndex:"ID",text:"_clnID"}]},viewConfig:{xtype:"gridview"}}


{store:{model:Ext.define(Ext.id(), {extend: "Ext.data.Model", fields:[{name:"ID"}],idProperty:"ID" }),storeId:"_str",proxy:{type:"ajax",url:"/Ctrl/Method/",actionMethods:Ext.apply({}, {read:"POST"}, Ext.data.proxy.Ajax.prototype.actionMethods)},remo teSort:true},id:"_grd",height:200,xtype:"grid",region:"center",split:true,iconCls:"#Accept",title:"example",columns:{items:[{id:"ID",dataIndex:"ID",text:"_clnID"}]},viewConfig:{xtype:"gridview"}}

and as you can see the results of each call are the same

but if i add the GridPanel to a Panel and then call ComponentLoader.ToJson it will produce different results as shown bellow:

Result 1:

{border:false,xtype:"panel",region:"center",items:[{store:{model:Ext.define(Ext.id(), {extend: "Ext.data.Model", fields:[{name:"ID"}],idProperty:"ID" }),storeId:"_str",proxy:{type:"ajax",url:"/Ctrl/Method/",actionMethods:Ext.apply({}, {read:"POST"}, Ext.data.proxy.Ajax.prototype.actionMethods)},remo teSort:true},id:"_grd",height:200,xtype:"grid",region:"center",split:true,iconCls:"#Accept",title:"example",columns:{items:[{id:"ID",dataIndex:"ID",text:"_clnID"}]},viewConfig:{xtype:"gridview"}}],layout:"border",collapseMode:"header"}

Result 2:

{border:false,xtype:"panel",region:"center",items:[Ext.create("Ext.grid.Panel",{store:{model:Ext.define(Ext.id(), {extend: "Ext.data.Model", fields:[{name:"ID"}],idProperty:"ID" }),storeId:"_str",proxy:{type:"ajax",url:"/Ctrl/Method/",actionMethods:Ext.apply({}, {read:"POST"}, Ext.data.proxy.Ajax.prototype.actionMethods)},remo teSort:true},id:"_grd",height:200,xtype:"grid",region:"center",split:true,iconCls:"#Accept",title:"example",columns:{items:[{id:"ID",dataIndex:"ID",text:"_clnID"}]},viewConfig:{xtype:"gridview"}});],layout:"border",collapseMode:"header"}

The first result render properly but the second one is not rendered.

The difference between the is that the second creates a element that contains the store as show bellow:

"Ext.create("Ext.grid.Panel", [Same script for both situations]);

Any ideas to overcome this problem?

Apr 11, 2012, 3:50 PM
finally i figured out the problem.


<ext:Panel ID="Panel3" runat="server" PreventHeader="true" Border="false">
<Loader ID="Loader3" runat="server" Mode="Component" AutoLoad="true" Url="/Ctrl/Test/">
<ext:Parameter Name="containerId" Value="Panel1" Mode="Value" />
<LoadMask ShowMask="true" />

The problem happens if i call ComponentLoader.ToJason passing the GridPanel (_grd) as parameter before adding it to the Panel (pnlCenter). If i comment the line 56 it will render properly.

i think that it should not produce differente results just because the method is called twice.


public ContentResult Test(string containerId)
GridPanel grd = new GridPanel
ID = "_grd",
Height = 200,
Collapsible = false,
Split = true,
Region = Region.Center,
Title = "example",
Icon = Icon.Accept

grd.View.Add(new GridView { TrackOver = true });

Store str = new Store { ID = "_str", AutoLoad = false, RemoteSort = true };

AjaxProxy proxy = new AjaxProxy();

//Define a URL do representante
proxy.Url = "/crl/method/";

proxy.ActionMethods.Read = HttpMethod.POST;

//Adiciona o representante ao abastecedor

//Adicona o abastecedor a grade

Model mdl = new Model();

ModelField clnMdl = new ModelField("ID");

Column cln = new Column();

cln.ID = "ID";

cln.DataIndex = "ID";

cln.Text = string.Format("_cln{0}", "ID");


cln.Sortable = true;



string makeProblem = ComponentLoader.ToJson(grd);

Panel pnlCenter = new Panel
Border = false,
Region = Region.Center,
CollapseMode = Ext.Net.CollapseMode.Header,
Layout = "BorderLayout",
Items =

// Viewport
Viewport vwp = new Viewport
Border = false,
Layout = "BorderLayout",
Items =

ContentResult r = new ContentResult();

r.Content = ComponentLoader.ToJson(vwp);

return r;

Apr 11, 2012, 4:20 PM
Each instance of control cannot be rendred twice because it can participate in one ASP.NET page life cycle only

Apr 11, 2012, 4:54 PM
i agree with you, but i was not flushing it for renderization, i just called ComponentLoader.ToJason

Apr 11, 2012, 4:56 PM
ComponentLoader internally renders component (to string) to get json reperesentation

Apr 11, 2012, 4:59 PM
What a sense to get json of grid and and its container?
You have to create two separate instance if you need to call ToJson twice (for example, create instance of grid in the function and call that function twice to get different instances)

Apr 11, 2012, 5:42 PM
First of all i would like to explain that it was a mistake of mine. I had two different codes and the unique difference between them was that one call ComponentLoader.ToJason for debug reasons before flushing it for renderization, as shown in the example provided.

so, its not a "real" problem. but i wonder why it changes the results if i call the method (no matter the reason) before flushing it for renderization

Apr 11, 2012, 7:42 PM
Well, it is limitation of dynamic rendering (ComponentLoader.ToJson uses dynamic rendering functionality)
Once rendered, a widget cannot be rendered again (widget gone through all stages already (OnInit, OnLoad, OnPreRender, OnRender and etc) and its internal state doesn't allow a rendering again)

Apr 11, 2012, 8:10 PM

I'm looking into this. I think we need to change something, because .ToJson() is confusing.

Apr 11, 2012, 8:18 PM
Thumbs up for both of you.

Jun 07, 2012, 1:24 PM

The ComponentLoader ToJson method has been renamed to ToConfig, revision #3989.

Thanks for the suggestion.