PDA

View Full Version : [CLOSED] Trying to validate Grid panel w/ editor, component columns, and input masks



AmitM
Mar 26, 2014, 1:56 AM
Hello, I'm trying to validate some editable cells in a grid panel and it is not working. I have two columns, TimeIn and TimeOut, and want to be sure that TimeIn <= TimeOut.

I am trying to use the ValidateEdit event:



Html.X().Column()
.Text("Friday")
.Flex(1)
.Columns(
Html.X().ComponentColumn()
.Editor(true)
.DataIndex("FridayAttend")
.Width(60)
.Text("Attended")
.Listeners(ls =>
{
ls.BeforeBind.Handler = "if (e.record.get('Friday') == '') e.config[0].disabled = true";
})
.Component(Html.X().Checkbox()),
Html.X().ComponentColumn()
.Editor(true)
.DataIndex("FridayIn")
.Width(60)
.Text("In")
.Listeners(ls =>
{
ls.BeforeBind.Handler = "if (e.record.get('Friday') == '') e.config[0].disabled = true";
})
.Component(
Html.X().TextField()
.Plugins(Html.X().InputMask()
.Mask("hi:mn aM")
.AllowInvalid(true)
.MaskSymbols(symbols =>
{
symbols.Add(new MaskSymbol() { Name = "h", Regex = "[01]" });
symbols.Add(new MaskSymbol() { Name = "i", Regex = "[0-9]" });
symbols.Add(new MaskSymbol() { Name = "m", Regex = "[0-5]" });
symbols.Add(new MaskSymbol() { Name = "n", Regex = "[0-9]" });
symbols.Add(new MaskSymbol() { Name = "a", Regex = "[aApP]" });

}
)
)
),
Html.X().ComponentColumn()
.Editor(true)
.DataIndex("FridayOut")
.Width(60)
.Text("Out")
.Listeners(ls =>
{
ls.BeforeBind.Handler = "if (e.record.get('Friday') == '') e.config[0].disabled = true";
ls.ValidateEdit.Handler = "alert('test'); return true;";
})
.Component(
Html.X().TextField()
.Plugins(Html.X().InputMask()
.Mask("hi:mn aM")
.AllowInvalid(true)
.MaskSymbols(symbols =>
{
symbols.Add(new MaskSymbol() { Name = "h", Regex = "[01]" });
symbols.Add(new MaskSymbol() { Name = "i", Regex = "[0-9]" });
symbols.Add(new MaskSymbol() { Name = "m", Regex = "[0-5]" });
symbols.Add(new MaskSymbol() { Name = "n", Regex = "[0-9]" });
symbols.Add(new MaskSymbol() { Name = "a", Regex = "[aApP]" });

}
)
)
)
)


However, the Handler runs as soon as I begin editing the cell, not when done. How can I validate this after they have finished editing TimeOut or TimeIn?

Thanks,
Amit

AmitM
Mar 27, 2014, 3:31 AM
Any thoughts?

Daniil
Mar 27, 2014, 3:52 PM
Hi @AmitM,

We apologize for the delay.

Well, while editing with a ComponentColumn, when you type a symbol in a cell, it is considered as edited. So, you should validate on each typed symbol.

AmitM
Mar 28, 2014, 3:23 AM
When I use ValidateEdit, the last keystroke does not trigger the function (which is the opposite of what I would expect).

When I use Edit, returning false did not prevent the edit.

Right now, the listener looks like:


ls.Edit.Handler = "console.log(e.record.get('FridayOut')); if (e.record.get('FridayOut').indexOf('_') == -1 && e.record.get('FridayIn') > e.record.get('FridayOut')) { Ext.Msg.notify('Error', 'No!'); return false; }";

Daniil
Mar 28, 2014, 2:40 PM
When I use ValidateEdit, the last keystroke does not trigger the function (which is the opposite of what I would expect).

Hmm, ValidateEdit appears to fire for any keystroke. Could you, please, provide a runnable test case and exact steps to reproduce the problem?

AmitM
Mar 28, 2014, 6:40 PM
Using ValidateEdit, the last keystroke never fired the event. So if you looked in the java console, the last line you would see was: "0500 _M" (I am using a mask edit).

I ended up just using the Edit event:


ls.Edit.Handler = "return editAttendenceFn(e.record, 'FridayIn', 'FridayOut');";




//AttendanceEdit Validator
var editAttendenceFn = function (record, FieldIn, FieldOut) {
if (record.get(FieldIn).indexOf('_') == -1 &&
record.get(FieldOut).indexOf('_') == -1)
{
var tIn = new Date (new Date().toDateString() + ' ' + record.get(FieldIn));
var tOut = new Date(new Date().toDateString() + ' ' + record.get(FieldOut));

if (tIn > tOut)
{
Ext.Msg.notify({title:'Error', html:'Time In must be less than Time Out!', hideDelay:'10000'});
return false;
} else return false;
}
else return true;
};