[CLOSED] [#139] FormPanel does not detect dynamically-loaded fields

[chrish]

I am trying to load fields into a FormPanel dynamically using a ComponentLoader without auto-load. The form renders properly; however, if I attempt to call getFields or getValues,my dynamic input elements are not detected. The problem is that calling submit() does not include the dynamically-added form elements. I believe this was working before switching to the SVN trunk version. I also noticed that FormPanel generates a div tag instead of a form tag. I am not sure if this is intended behavior.

My intention is to dynamically load controls into a FormPanel via JavaScript, and later submit the form via JavaScript. Currently I am trying to inject a TabPanel with various form controls embedded inside in different Panels with various layouts. To help solve this problem I am providing a concise example of the problem.

Controller

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

[HttpGet]
public ActionResult Form()
{
    return new Ext.Net.MVC.PartialViewResult {
        ContainerId = "FormContainer",
        ClearContainer = true,
        RenderMode = Ext.Net.RenderMode.AddTo,
        WrapByScriptTag = false,
        ViewName = "Form"
    };
}

Index.cshtml

    
@(Html.X().FormPanel()
        .ID("Form")
        .Loader(Html.X().ComponentLoader()
            .Url(Url.Action("Form"))
            .AutoLoad(false)
            .Mode(LoadMode.Script)
        )
        .TopBar(Html.X().Toolbar()
            .Items(
                Html.X().Button()
                    .Text("Load")
                    .OnClientClick("Ext.getCmp('Form').getLoader().load()"),
                    
                Html.X().Button()
                    .Text("Get Fields")
                    .OnClientClick("console.log(Ext.getCmp('Form').getForm().getFields())")
            )
        )
        .Items(
        
            Html.X().Panel()
                .ID("FormContainer")
                
        )
)

Form.cshtml

@(Html.X().TabPanel()
        .BodyPadding(10)
        .Items(


            Html.X().Panel()
                .Title("Test")
                .Items(
                
                    Html.X().ComboBox()
                        .Name("Test 2")
                
                )
        )
)

[Baidaly]

Hello!

You have to reset form fields:

Html.X().Button()
	.Text("Load")
	.OnClientClick("Ext.getCmp('Form').getLoader().load(); Ext.getCmp('Form').getForm()._fields = null;")

[Daniil]

Hi everybody,

I think it is a bug. Reported to Sencha.
http://www.sencha.com/forum/showthread.php?255138

For now please use the workaround suggest by @Baidaly.

Or remove an interim "FormContainer" Panel and add items directly to the FormPanel.

[Daniil]

Sencha opened a bug.

We created an Issue to monitor this defect.
https://github.com/extnet/Ext.NET/issues/139

[chrish]

Thank you, and I appreciate the investigation! I have resolved the issue by implementing the workaround supplied in a load listener attached to the ComponentLoader. My form now detects the dynamically-added elements and submits the correct data.

Feel free to mark this post as closed.

[Daniil]

Thank you for the confirming that the workaround works for you.

We will keep the thread opened till Sencha fix it and we incorporate the fix into our sources.

Thank you again for the report.

[Baidaly]

It should be fixed in SVN and included to the next release (v2.2).