View Full Version : EditorGridPanel: mark a field as invalid on store event exception

5 Aug 2009, 1:52 PM

I'm trying to mark a field of an EditorGridPanel as invalid to give the user feedback of an unqiue validation, which is done in the same db transaction as the update to ensure db consitency.

i use the following code to listen for the appropriate event, since i'm returning {"success":false,"message":"This violates the unique constraint"} from the server in case:

this.store.on('exception', this.onStoreException, this);

the handler:

onStoreException: function(proxy, type, action, options, res, arg) {
App.setAlert(false, this.getColumnModel().getCellEditor(2, 2).startValue);
this.getColumnModel().getCellEditor(2, 2).field.markInvalid('This is an invalid Input');

i see the alert with the startValue, but markInvalid does nothing. (i put that code in the writer example of the extjs download package.)

i was looking for the same behaviour as in the Ext.form.Action.Submit where i can return an error msg with a key and the error is shown at the form field. i already managed to return the right response from the server and get the right column and row index for the error ids

however i can't figure out how to show that error in the EditorGridPanel.

thx in advance

27 Sep 2011, 3:58 AM
Instead of waiting for the returned SQL Exception I implemented a column renderer, to give the user direct feedback.
NOTE: this does only work if not using paging, performance is good for over 2000 entries but may get poor on higher entry counts.

var duplicateEmailRenderer = function(value, cell, record, rowIndex, colIndex, store) {

if (record != undefined) {
var duplicatesRowIndex = store.find('email', value, 0, false, true);
while (duplicatesRowIndex == rowIndex || (store.getAt(duplicatesRowIndex) && store.getAt(duplicatesRowIndex).get('email') != value)) {
duplicatesRowIndex = store.find('email', value, duplicatesRowIndex + 1, false, true);
if (duplicatesRowIndex != -1) {
cell.css += ' x-form-invalid';
cell.attr = 'ext:qtip="Diese Email Adresse ist bereits in Verwendung!"; ext:qclass="x-form-invalid-tip"';
} else {
cell.css = '';
cell.attr = 'ext:qtip=""';
return value;

Using JQuery to prevent the user from saving in case of existing invalid fields:

function hasInvalid() {
var invalidCount = $("td.x-form-invalid").length;
if (invalidCount > 0) {
return true;
return false;