[CLOSED] Using the value of a component as a Parameter of a TreeStore an exception is thrown

**RCN** · May 28, 2013, 6:52 PM

I am trying to add the following parameter to a TreeStore

<ext:StoreParameter Name="param1" Value="App._frm.form.getFieldValues()" Mode="Raw" Encode="true" />

But i get the following error:

Click image for larger version.

Name: Error002.png
Views: 25
Size: 36.5 KB
ID: 6281

It happens because the FormPanel (_frm) has not been initialized yet. If i move lines 44 to 49 above line 6, it works since the FormPanel is initialized prior initializing the TreeStore.

It's strange because the problem does not happen in Scenario 2, when i use a Store (GridPanel) instead of using a TreeStore (TreePanel).

Any Ideas?

Thanks in advance.

Scenario 1 - TreeStore - Fail

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<body>
    <ext:ResourceManager runat="server" />
    <%--Tree Panel--%>
    <ext:TreePanel RootVisible="false" Title="Ext.Net" Height="700" Width="500" Margins="10"
        Border="false" runat="server">
        <Store>
            <ext:TreeStore runat="server">
                <Proxy>
                    <ext:AjaxProxy Url="/Example/LoadFakeChildren">
                        <ActionMethods Read="POST" />
                        <Reader>
                            <ext:JsonReader Root="data" />
                        </Reader>
                    </ext:AjaxProxy>
                </Proxy>
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="Task" />
                            <ext:ModelField Name="Column1" />
                        </Fields>
                    </ext:Model>
                </Model>
                <Parameters>
                    <ext:StoreParameter Name="param1" Value="App._frm.form.getFieldValues()" Mode="Raw"
                        Encode="true" />
                </Parameters>
            </ext:TreeStore>
        </Store>
        <Root>
            <ext:Node NodeID="0" Text="Root" />
        </Root>
        <ColumnModel>
            <Columns>
                <ext:TreeColumn Text="Task" Lockable="true" DataIndex="Task" Flex="2" runat="server" />
                <ext:Column Text="Column1" Lockable="true" DataIndex="Column1" runat="server" />
            </Columns>
        </ColumnModel>
    </ext:TreePanel>
    <%--Form Panel--%>
    <ext:FormPanel ID="_frm" runat="server">
        <Items>
            <ext:TextField ID="TextField1" runat="server" FieldLabel="First Name" Name="FirstName" />
        </Items>
    </ext:FormPanel>
</body>
</html>

namespace SandBox.Controllers
{
    public class ExampleController : System.Web.Mvc.Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public StoreResult LoadFakeChildren(string param1)
        {
            NodeCollection nodes = new NodeCollection(false);

            for (int index = 1; index < 6; index++)
            {
                Node no = new Node();
                no.NodeID = index.ToString() + DateTime.Now.Second;
                no.CustomAttributes.Add(new ConfigItem { Name = "Task", Value = no.NodeID, Mode = ParameterMode.Value });
                no.CustomAttributes.Add(new ConfigItem { Name = "Column1", Value = Guid.NewGuid().ToString(), Mode = ParameterMode.Value });
                nodes.Add(no);
            }

            return new StoreResult { Data = nodes.ToJson() };
        }
    }
}

Scenario 2 - Store - work

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <%--Grid Panel--%>
    <ext:GridPanel runat="server" Title="Records" Frame="false" Width="300">
        <Store>
            <ext:Store runat="server">
                <Proxy>
                    <ext:AjaxProxy Url="/Example/LoadFakeRecords/">
                        <ActionMethods Read="POST" />
                        <Reader>
                            <ext:JsonReader Root="data" />
                        </Reader>
                    </ext:AjaxProxy>
                </Proxy>
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="ID" Type="String" />
                            <ext:ModelField Name="Name" Type="String" />
                        </Fields>
                    </ext:Model>
                </Model>
                <Parameters>
                    <ext:StoreParameter Name="param1" Value="App._frm.form.getFieldValues()" Mode="Raw"
                        Encode="true" />
                </Parameters>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column runat="server" Text="ID" DataIndex="ID" />
                <ext:Column runat="server" Text="Name" DataIndex="Name" />
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    <%--Form Panel--%>
    <ext:FormPanel ID="_frm" runat="server">
        <Items>
            <ext:TextField ID="TextField1" runat="server" FieldLabel="First Name" Name="FirstName" />
        </Items>
    </ext:FormPanel>
</body>
</html>

namespace SandBox.Controllers
{
    public class ExampleController : System.Web.Mvc.Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public StoreResult LoadFakeRecords(string param1)
        {
            List<Person> lst = new List<Person>();

            for (int index = 0; index < 15; index++)
            {
                lst.Add(new Person
                {
                    ID = index,
                    Name = "Name" + index
                });
            }

            return new StoreResult(lst, lst.Count());
        }
    }

    public class Person
    {
        public int ID { get; set; }

        public string Name { get; set; }

    }
}

**Baidaly** · May 28, 2013, 10:51 PM

Hello!

Interesting. We are investigating this issue.

**Baidaly** · May 29, 2013, 2:18 AM

It seems that happens due to rendering issues. I've tried the following and it works for me:

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<body>
    <ext:ResourceManager runat="server" SourceFormatting="True" ScriptMode="Debug" />
    
    <%--Form Panel--%>
    <ext:FormPanel ID="_frm" runat="server" RenderTo="FormPanelContainer">
        <Items>
            <ext:TextField ID="TextField1" runat="server" FieldLabel="First Name" Name="FirstName" />
        </Items>
    </ext:FormPanel>

    <%--Tree Panel--%>
    <ext:TreePanel RootVisible="false" Title="Ext.Net" Height="700" Width="500" Margins="10"
        Border="false" runat="server">
        <Store>
            <ext:TreeStore runat="server" ID="TreeStore1">
                <Proxy>
                    <ext:AjaxProxy Url="/TreePanel_Loaders/Proxy/LoadFakeChildren">
                        <ActionMethods Read="POST" />
                        <Reader>
                            <ext:JsonReader Root="data" />
                        </Reader>
                    </ext:AjaxProxy>
                </Proxy>
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="Task" />
                            <ext:ModelField Name="Column1" />
                        </Fields>
                    </ext:Model>
                </Model>
                <Parameters>
                    <ext:StoreParameter Name="param1" Value="App._frm.form.getFieldValues()" Mode="Raw"
                        Encode="true" />
                </Parameters>
            </ext:TreeStore>
        </Store>
        <Root>
            <ext:Node NodeID="0" Text="Root" />
        </Root>
        <ColumnModel>
            <Columns>
                <ext:TreeColumn Text="Task" Lockable="true" DataIndex="Task" Flex="2" runat="server" />
                <ext:Column Text="Column1" Lockable="true" DataIndex="Column1" runat="server" />
            </Columns>
        </ColumnModel>
    </ext:TreePanel>
    
    <div id="FormPanelContainer"></div>
</body>
</html>

However, I'll ask my colleagues.

**Daniil** · May 29, 2013, 4:47 AM

Hi,

Yes, a Store can load its data before rendering/creating the things.

In these cases a Store load request should be deferred till the required things are created/rendered.

In your sample, the following happens:

Ext.create("Ext.grid.Panel", {
    store: {
        /* makes an auto load request and extract a parameter from a FormPanel which is not created yet */    
    }
});

Ext.create("Ext.form.Panel", { });

@Baidaly suggested the following.

Ext.create("Ext.form.Panel", { });

Ext.create("Ext.grid.Panel", {
    store: {
        /* makes an auto load request and extract a parameter from a FormPanel which is already created */    
    }
});

And yes, it is a possible solution.

Another approach is setting AutoLoad="false" for the Store and delaying a load request. You can delay it with some hardcoded delay or run a load request from, for example, a FormPanel's Render/After listener.

**RCN** · May 29, 2013, 2:16 PM

In my real-world scenario, it's not possible to move the FormPanel over TreePanel because both are inside a ViewPort, East and Center regions respectively.

Originally Posted by Daniil

Another approach is setting AutoLoad="false" for the Store and delaying a load request. You can delay it with some hardcoded delay or run a load request from, for example, a FormPanel's Render/After listener.

It's possible to overcome the issue by doing the following:

Set TreeStore's AutoLoad property to false (Line 29)
Load the records in TreePanel's AfterRender listener, with a delay of 1 second (Line 26)

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <script type="text/javascript">
        var load = function () {
            var rootNode = App.TreePanel1.getRootNode();
            if (rootNode.isExpanded()) {
                App.TreePanel1.getStore().load({
                    node: rootNode
                });
            }
            else {
                rootNode.expand();
            }
        }
    </script>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
        <Items>
            <%--Tree Panel - Center Region--%>
            <ext:TreePanel ID="TreePanel1" Region="Center" RootVisible="false" Title="Ext.Net"
                Border="false" runat="server">
                <Listeners>
                    <AfterRender Handler="load();" Delay="1000" />
                </Listeners>
                <Store>
                    <ext:TreeStore ID="TreeStore1" AutoLoad="false" runat="server">
                        <Proxy>
                            <ext:AjaxProxy Url="/Example/LoadFakeChildren">
                                <ActionMethods Read="POST" />
                                <Reader>
                                    <ext:JsonReader Root="data" />
                                </Reader>
                            </ext:AjaxProxy>
                        </Proxy>
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="Task" />
                                    <ext:ModelField Name="Column1" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Parameters>
                            <ext:StoreParameter Name="param1" Value="App._frm.form.getFieldValues()" Mode="Raw"
                                Encode="true" />
                        </Parameters>
                    </ext:TreeStore>
                </Store>
                <Root>
                    <ext:Node NodeID="0" Text="Root" />
                </Root>
                <ColumnModel>
                    <Columns>
                        <ext:TreeColumn ID="TreeColumn1" Text="Task" Lockable="true" DataIndex="Task" Flex="2"
                            runat="server" />
                        <ext:Column ID="Column1" Text="Column1" Lockable="true" DataIndex="Column1" runat="server" />
                    </Columns>
                </ColumnModel>
            </ext:TreePanel>
            <%--Form Panel - East Region--%>
            <ext:FormPanel ID="_frm" Title="Form" Region="East" BodyPadding="10" runat="server">
                <Items>
                    <ext:TextField ID="TextField1" runat="server" FieldLabel="First Name" Name="FirstName" />
                </Items>
            </ext:FormPanel>
        </Items>
    </ext:Viewport>
</body>
</html>

namespace SandBox.Controllers
{
    public class ExampleController : System.Web.Mvc.Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public StoreResult LoadFakeChildren(string param1)
        {
            NodeCollection nodes = new NodeCollection(false);

            for (int index = 1; index < 6; index++)
            {
                Node no = new Node();
                no.NodeID = index.ToString() + DateTime.Now.Second;
                no.CustomAttributes.Add(new ConfigItem { Name = "Task", Value = no.NodeID, Mode = ParameterMode.Value });
                no.CustomAttributes.Add(new ConfigItem { Name = "Column1", Value = Guid.NewGuid().ToString(), Mode = ParameterMode.Value });
                nodes.Add(no);
            }

            return new StoreResult { Data = nodes.ToJson() };
        }
    }
}

**Daniil** · May 29, 2013, 4:03 PM

Why not a Render or AfterRender FormPanel's listener without a Delay?

**RCN** · May 29, 2013, 4:17 PM

Originally Posted by Daniil

Why not a Render or AfterRender FormPanel's listener without a Delay?

I use more than one component as parameter of the store. Is there any event raised after all components are renderized?

**RCN** · May 29, 2013, 4:20 PM

Is ResourceManager's DocumentReady raised after rendering all components?

**Baidaly** · May 30, 2013, 12:41 AM

Originally Posted by RCN

Is ResourceManager's DocumentReady raised after rendering all components?

DocumentReady means that document sources loaded except images but this doesn't mean that all components are rendered due to complex layout process of ExtJS.

Your solution looks appropriate. However, we'll try to find some other solution for your case.

**Daniil** · May 30, 2013, 5:07 AM

There is no such an event which fires after rendering all the components. And there is no a simple way. You can listen Render events of all the required components and increase some counter. You can start a task with some interval to poll rendered status of all the required components. But you can stay with a Delay.

Thread: [CLOSED] Using the value of a component as a Parameter of a TreeStore an exception is thrown

Thread Tools

Search Thread

Display

[CLOSED] Using the value of a component as a Parameter of a TreeStore an exception is thrown

Similar Threads

[CLOSED] [#58] Exception thrown when adding a CommandColumn to a TreePanel

[CLOSED] [#49] Directmethod exception with hashtable as parameter

[CLOSED] Exception of type 'System.OutOfMemoryException' was thrown

[CLOSED] Often Runtime Error in Microsoft JScript: Exception thrown and not collected

[CLOSED] null value exception thrown when deserializing null value in JSON

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Using the value of a component as a Parameter of a TreeStore an exception is thrown

[CLOSED] Using the value of a component as a Parameter of a TreeStore an exception is thrown

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us