REQUIRED INFORMATION

Ext version tested:
  • Ext 4.2.0 beta 2
Browser versions tested against:
  • Chrome
  • IE9
DOCTYPE tested against:
  • <!DOCTYPE html>
Description:
  • A BasicForm doesn't get dynamically added items if they are not added directly to a FormPanel, but somewhere down in hierarchy. So, they are not submitted.
  • It works with ExtJS 4.1.1.
  • As a workaround we reset "_fields" after adding new items. It forces the fields query to be re-executed.
Code:
formPanel.getForm()._fields = null;


Steps to reproduce the problem:
  • Click the "add" button
  • Click the "getFields" button
The result that was expected:
  • "1" in the alert box, i.e. one field in the BasicForm
The result that occurs instead:
  • "0" in the alert box
Test Case:

Code:
<!DOCTYPE html>
<html>
<head>
    <title>BasicForm doesn't get dynamically added items</title>

    <link rel="stylesheet" href="../resources/css/ext-all.css" />
    
    <script src="../ext-all-debug.js"></script>

    <script>
        Ext.onReady(function () {
            Ext.create("Ext.button.Button", {
                renderTo: Ext.getBody(),
                text: "Add a field to the interim container",
                handler: function () {
                    Ext.getCmp("SomeInterimContainer1").add({
                        xtype: "textfield",
                        value: "Hello"
                    });
                }
            });

            Ext.create("Ext.button.Button", {
                renderTo: Ext.getBody(),
                text: ".getFields().getCount()",
                handler: function () {
                    alert(Ext.getCmp("FormPanel1").getForm().getFields().getCount());
                }
            });

            Ext.create("Ext.form.Panel", {
                id: "FormPanel1",
                renderTo: Ext.getBody(),
                items: [{
                    id: "SomeInterimContainer1",
                    xtype: "container"
                }]
            });
        });
    </script>
</head>
<body>

</body>
</html>