PDA

View Full Version : [CLOSED] Issue with validate change on nested grid panel



REB
Jun 04, 2016, 10:18 PM
Hi,

We are having an issue cell editing plugin inside a row expander, specifically the the validateedit listener, it is being called after the edit is made and not before the edit is made, also when the edit is made the incorrect values for the validation context are passed, this is, the newvalue and old value are always the same.

The issue is present in Ext 4.1, it was working correctly in 4.0

Here is a sample to reproduce the problem, to reproduce, add rows using the button on the panel, then expand the component and add rows to the inner grid, when try to edit the problem will be reproduced



<%@ Page Language="C#" %>

<script runat="server">

</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET Example</title>
</head>
<body>
<ext:ResourceManager runat="server" Theme="Triton" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="RowExpander"
Collapsible="true"
AnimCollapse="true"
Icon="Table"
Width="800"
Height="600">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Add record to grid" Handler="var grid = this.up('grid'); grid.getStore().add(new (grid.getStore().getModel())());" />
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Prop1" Type="String" />
<ext:ModelField Name="Prop2" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" DataIndex="Prop1" Flex="1" />
<ext:Column runat="server" DataIndex="Prop2" Flex="10"/>
</Columns>
</ColumnModel>
<Plugins>
<ext:RowExpander>
<Component>
<ext:GridPanel
ID="GridPanel2"
runat="server"
Title="RowExpanded"
Icon="Table">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Add record to grid" Handler="var grid = this.up('grid'); grid.getStore().add(new (grid.getStore().getModel())());" />
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Prop3" Type="Date" />
<ext:ModelField Name="Prop4" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" DataIndex="Prop3">
<Editor>
<ext:DateField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" DataIndex="Prop4">
<Editor>
<ext:DateField runat="server" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing>
<Listeners>

<ValidateEdit Handler="alert('should be called after edit, not before'); return true;" />
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
</Component>
</ext:RowExpander>
</Plugins>
</ext:GridPanel>

</body>
</html>


Regards.

fabricio.murta
Jun 06, 2016, 10:13 PM
Hello @REB!

We will investigate the issue and return to you as soon as we can! Thanks for reporting!

REB
Jun 13, 2016, 4:29 PM
Hi Fabricio, any updates?

fabricio.murta
Jun 13, 2016, 9:10 PM
Hello @REB! Apologies for the long long delay, and thank you very much for the bump on the thread!

I'm still not really sure why this ended up on ExtJS, but probably it fixed some sort of situation by "completing" an edit first thing. But it caused the validation event to be triggered nevertheless.

I believe that best would be, for now, to just return soon if the event is triggered before edit (if the edited value is the same of the original one, for example), but you can use this to prevent triggering the early edit validation event:



Ext.define('Ext.Editor', {
override: 'Ext.Editor',
startEdit: function (el, value, doFocus) {
var me = this,
field = me.field,
dom, ownerCt, renderTo;

me.boundEl = Ext.get(el);
dom = me.boundEl.dom;
if (me.useBoundValue && !Ext.isDefined(value)) {
value = Ext.String.trim(dom.textContent || dom.innerText || dom.innerHTML);
}
if (me.fireEvent('beforestartedit', me, me.boundEl, value) !== false) {

Ext.suspendLayouts();
if (!me.rendered) {
ownerCt = me.ownerCt;
renderTo = me.renderTo || (ownerCt && ownerCt.getEl()) || Ext.getBody();
Ext.fly(renderTo).position();
me.renderTo = renderTo;
}
me.startValue = value;
me.show();
me.realign(true);

field.suspendEvents();
field.setValue(value);
field.resetOriginalValue();
field.resumeEvents();
if (doFocus !== false) {
field.focus(field.selectOnFocus ? true : [
Number.MAX_VALUE
]);
}
if (field.autoSize) {
field.autoSize();
}
Ext.resumeLayouts(true);
me.toggleBoundEl(false);
me.editing = true;
}
}
});


But this early call could catch a situation where the user cancels the editor component, making it not call the validation for some reason. I'm not really sure which bug this could have fixed in ExtJS when they added this call.