PDA

View Full Version : FieldReplicator binding



RCN
Apr 08, 2015, 12:31 PM
On the following sample, press Load Record button. I would expect that it shows one field for each value of PropB.

23541

Refresh the page, and inform the following values
23542

Then press, Clear button. I would expect that all B fields were cleared.
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.

Daniil
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:)

RCN
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.

RCN
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>

RCN
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>

Daniil
Apr 14, 2015, 11:01 AM
Nice!

Do you want me to move the thread into the Examples and Extras forum?

RCN
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.