What's New?

FieldReplicator binding

  1. #1
    Apr 08, 2015, 12:31 PM

    FieldReplicator binding

    On the following sample, press Load Record button. I would expect that it shows one field for each value of PropB.

    Click image for larger version.  Name: fr001.png  Views: 3  Size: 6.4 KB  ID: 23541

    Refresh the page, and inform the following values
    Click image for larger version.  Name: fr002.png  Views: 3  Size: 5.4 KB  ID: 23542

    Then press, Clear button. I would expect that all B fields were cleared.
    Click image for larger version.  Name: fr003.png  Views: 1  Size: 5.7 KB  ID: 23551

    <!DOCTYPE html>
<html>
<head runat="server">
    <script type="text/javascript">
        var LoadRecord = function () {
            App._str.loadRawData({ PropA: 'Object.NET', PropB: ['v1', 'v2', 'v3'] });

            App._frm.getForm().loadRecord(App._str.getAt(0))
        }
        var Clear = function () {
            App._str.loadRawData({ PropA: '', PropB: [] });

            App._frm.getForm().loadRecord(App._str.getAt(0))
        }
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" Theme="Crisp" />
    <ext:Store ID="_str" runat="server">
        <Model>
            <ext:Model runat="server">
                <Fields>
                    <ext:ModelField Name="PropA" Type="String" />
                    <ext:ModelField Name="PropB" Type="Object" />
                </Fields>
            </ext:Model>
        </Model>
    </ext:Store>
    <ext:FormPanel Margin="10" ID="_frm" Title="Form Panel" DefaultAnchor="100%" Width="300" Height="350" Border="true" runat="server">
        <FieldDefaults LabelAlign="Top" MsgTarget="Side" />
        <Items>
            <ext:TextField FieldLabel="A" Name="PropA" runat="server" />
            <ext:TextField FieldLabel="B" Name="PropB" runat="server">
                <Plugins>
                    <ext:FieldReplicator runat="server" />
                </Plugins>
            </ext:TextField>
        </Items>
        <Buttons>
            <ext:Button Text="Load Record" runat="server">
                <Listeners>
                    <Click Handler="LoadRecord();" />
                </Listeners>
            </ext:Button>
            <ext:Button Text="Clear" runat="server">
                <Listeners>
                    <Click Handler="Clear();" />
                </Listeners>
            </ext:Button>
        </Buttons>
    </ext:FormPanel>
</body>
</html>
    Thanks in advance.
  2. #2
    Apr 09, 2015, 3:22 PM
    Hi Raphael,

    On the following sample, press Load Record button. I would expect that it shows one field for each value of PropB.
    Well, I think there is no integration the loadRecord method and FieldReplicator plugin. Probably, you might implement it in minutes;)

    Then press, Clear button. I would expect that all B fields were cleared.
    Agree, one possible improvement more:)
  3. #3
    Apr 10, 2015, 11:41 AM
    I am gonna implement those functionalities this weekend, so, you might include it into Ext.NET after reviewing. Please leave this thread open until monday.
  4. #4
    Apr 13, 2015, 8:20 PM
    Note: It would be pretty easier to implement it if Ext.form.Basic.setValues does not have an inner setVal function.

    <!DOCTYPE html>
<html>
<head runat="server">
    <script type="text/javascript">
        var LoadRecord = function () {
            App._str.loadRawData({ PropA: 'Object.NET', PropB: ['v1', 'v2', 'v3'] });

            App._frm.getForm().loadRecord(App._str.getAt(0))
        }
        var Clear = function () {
            App._str.loadRawData({ PropA: '', PropB: [] });

            App._frm.getForm().loadRecord(App._str.getAt(0))
        }

        Ext.ux.FieldReplicator.override({
            init: function (field) {
                this.callParent(arguments);

                var form = field.up("form");
                if (form != null) {
                    if (form.replicatedFields == null) {
                        form.replicatedFields = new Array();
                    }
                    if (!Ext.Array.contains(form.replicatedFields, field.name)) {
                        Ext.Array.push(form.replicatedFields, field.name);
                    }
                }
            }
        });

        Ext.form.field.Base.override({
            setValue: function (value) {
                if (Ext.isArray(value) && !Ext.isEmpty(this.replicatorId)) {
                    var siblings = this.ownerCt.query('[replicatorId='.concat(this.replicatorId).concat(']'));
                    for (var index = 0; index < siblings.length; index++) {
                        var field = siblings[index];
                        var fieldValue = null;
                        if (index <= value.length - 1) {
                            fieldValue = value[index];
                        }
                        if (field == this) {
                            this.callParent([fieldValue]);
                        }
                        else {
                            field.setValue(fieldValue);
                            if (this.ownerCt.trackResetOnLoad) {
                                field.resetOriginalValue();
                            }
                        }
                    }
                }
                else {
                    this.callParent(arguments);
                }
            }
        });

        Ext.form.Basic.override({
            setValues: function (values) {
                this.processReplicatedFields(values);
                this.callParent(arguments);
            },
            processReplicatedFields: function (values) {
                var formPanel = this.owner;

                var replicatedFields = formPanel.replicatedFields;
                if (replicatedFields != null) {
                    for (var index = 0; index < replicatedFields.length; index++) {
                        var property = replicatedFields[index];
                        var replicatedByName = formPanel.query('[name='.concat(property).concat(']'));
                        for (var subIndex = 1; subIndex < replicatedByName.length; subIndex++) {
                            var replicated = replicatedByName[subIndex];

                            Ext.Function.defer(replicated.destroy, 10, replicated);
                        }

                        var propertyValue = values[property];
                        if (Ext.isArray(propertyValue)) {
                            var field = replicatedByName[0];

                            var idx = formPanel.items.indexOf(field);
                            for (var subIndex = 1; subIndex < propertyValue.length + 1; subIndex++) {
                                if (field.onReplicate) {
                                    field.onReplicate();
                                }
                                formPanel.add(idx + subIndex, field.cloneConfig({ replicatorId: field.replicatorId }));
                            }
                        }
                    }
                }
            }
        });
    </script>
</head>
<body>
    <ext:ResourceManager ScriptMode="Debug" runat="server" Theme="Crisp" />
    <ext:Store ID="_str" runat="server">
        <Model>
            <ext:Model runat="server">
                <Fields>
                    <ext:ModelField Name="PropA" Type="String" />
                    <ext:ModelField Name="PropB" Type="Object" />
                </Fields>
            </ext:Model>
        </Model>
    </ext:Store>
    <ext:FormPanel AutoScroll="true" Margin="10" ID="_frm" Title="Form Panel" DefaultAnchor="100%" Width="300" Height="350" Border="true" runat="server">
        <FieldDefaults LabelAlign="Top" MsgTarget="Side" />
        <Items>
            <ext:TextField FieldLabel="A" Name="PropA" runat="server" />
            <ext:TextField FieldLabel="B" Name="PropB" runat="server">
                <Plugins>
                    <ext:FieldReplicator runat="server" />
                </Plugins>
            </ext:TextField>
        </Items>
        <Buttons>
            <ext:Button Text="Load Record" runat="server">
                <Listeners>
                    <Click Handler="LoadRecord();" />
                </Listeners>
            </ext:Button>
            <ext:Button Text="Clear" runat="server">
                <Listeners>
                    <Click Handler="Clear();" />
                </Listeners>
            </ext:Button>
        </Buttons>
    </ext:FormPanel>
</body>
</html>
    Last edited by RCN; Apr 13, 2015 at 8:55 PM.
  5. #5
    Apr 13, 2015, 8:56 PM
    A bit simpler approach:

    <!DOCTYPE html>
<html>
<head runat="server">
    <script type="text/javascript">
        var LoadRecord = function () {
            App._str.loadRawData({ PropA: 'Object.NET', PropB: ['v1', 'v2', 'v3'] });

            App._frm.getForm().loadRecord(App._str.getAt(0))
        }
        var Clear = function () {
            App._str.loadRawData({ PropA: '', PropB: [] });

            App._frm.getForm().loadRecord(App._str.getAt(0))
        }

        Ext.ux.FieldReplicator.override({
            init: function (field) {
                this.callParent(arguments);

                var form = field.up("form");
                if (form != null) {
                    if (form.replicatedFields == null) {
                        form.replicatedFields = new Array();
                    }
                    if (!Ext.Array.contains(form.replicatedFields, field.name)) {
                        Ext.Array.push(form.replicatedFields, field.name);
                    }
                }
            }
        });

        Ext.form.field.Base.override({
            setValue: function (value) {
                if (!Ext.isArray(value) || Ext.isEmpty(this.replicatorId)) {
                    this.callParent(arguments);
                }
            }
        });

        Ext.form.Basic.override({
            setValues: function (values) {
                this.processReplicateFields(values);
                this.callParent(arguments);
            },
            processReplicateFields: function (values) {
                var formPanel = this.owner;

                var replicatedFields = formPanel.replicatedFields;
                if (replicatedFields != null) {
                    for (var index = 0; index < replicatedFields.length; index++) {
                        var property = replicatedFields[index];
                        var replicatedByName = formPanel.query('[name='.concat(property).concat(']'));
                        for (var subIndex = 0; subIndex < replicatedByName.length; subIndex++) {
                            var replicated = replicatedByName[subIndex];
                            if (subIndex == 0) {
                                replicated.setValue(null);
                            }
                            else {

                                Ext.Function.defer(replicated.destroy, 10, replicated);
                            }
                        }

                        var propertyValue = values[property];

                        if (Ext.isArray(propertyValue)) {
                            var field = replicatedByName[0];
                            var fieldIndex = formPanel.items.indexOf(field);

                            for (var valueIndex = 0; valueIndex < propertyValue.length + 1; valueIndex++) {
                                var currentField = null;

                                if (valueIndex == 0) {
                                    currentField = field;
                                }
                                else {
                                    if (field.onReplicate) {
                                        field.onReplicate();
                                    }
                                    currentField = formPanel.add(++fieldIndex, field.cloneConfig({ replicatorId: field.replicatorId }));
                                }

                                if (valueIndex < propertyValue.length) {
                                    currentField.setValue(propertyValue[valueIndex])

                                    if (formPanel.trackResetOnLoad) {
                                        currentField.resetOriginalValue();
                                    }
                                }
                            }
                        }
                    }
                }
            }
        });
    </script>
</head>
<body>
    <ext:ResourceManager ScriptMode="Debug" runat="server" Theme="Crisp" />
    <ext:Store ID="_str" runat="server">
        <Model>
            <ext:Model runat="server">
                <Fields>
                    <ext:ModelField Name="PropA" Type="String" />
                    <ext:ModelField Name="PropB" Type="Object" />
                </Fields>
            </ext:Model>
        </Model>
    </ext:Store>
    <ext:FormPanel AutoScroll="true" Margin="10" ID="_frm" Title="Form Panel" DefaultAnchor="100%" Width="300" Height="350" Border="true" runat="server">
        <FieldDefaults LabelAlign="Top" MsgTarget="Side" />
        <Items>
            <ext:TextField FieldLabel="A" Name="PropA" runat="server" />
            <ext:TextField FieldLabel="B" Name="PropB" runat="server">
                <Plugins>
                    <ext:FieldReplicator runat="server" />
                </Plugins>
            </ext:TextField>
        </Items>
        <Buttons>
            <ext:Button Text="Load Record" runat="server">
                <Listeners>
                    <Click Handler="LoadRecord();" />
                </Listeners>
            </ext:Button>
            <ext:Button Text="Clear" runat="server">
                <Listeners>
                    <Click Handler="Clear();" />
                </Listeners>
            </ext:Button>
        </Buttons>
    </ext:FormPanel>
</body>
</html>
  6. #6
    Apr 14, 2015, 11:01 AM
    Nice!

    Do you want me to move the thread into the Examples and Extras forum?
  7. #7
    Apr 14, 2015, 11:26 AM
    Nice!

    Do you want me to move the thread into the Examples and Extras forum?
    Yes, it may be useful to someone else.

Similar Threads

  1. [CLOSED] Form's GetFieldValues vs FieldReplicator
    By RCN in forum 3.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 07, 2015, 11:41 AM
  2. grid binding
    By ada in forum 2.x Help
    Replies: 0
    Last Post: Jun 06, 2013, 2:38 PM
  3. [CLOSED] TreeGrid - binding
    By adelaney in forum 2.x Legacy Premium Help
    Replies: 20
    Last Post: Sep 13, 2012, 8:04 AM
  4. <ext:FieldReplicator>
    By dsmith in forum 1.x Help
    Replies: 0
    Last Post: Jul 07, 2010, 8:21 PM
  5. Binding ComboBox
    By Dominik in forum 1.x Help
    Replies: 4
    Last Post: Jun 17, 2010, 7:46 AM

Posting Permissions