[CLOSED] ComboBox Validation

[xtoolz]

Good Morning all

we got a Combobox implementation similar to your example here : https://examples3.ext.net/#/Form/ComboBox/Custom_Search

Because our customer has very special needs :-/ We need to inform the user that his entry doesn't match to a record (in your example type in 'test' and you wont find a record).

My idea: attach a Listener to the Blur event, check the Value and inform the User.

My JS Code looks like this

var validateCodeComboBox = function (record, item, config) {
  
  if (!_pageLoaded)
    return;

  var data = record.store.data.items;
  var control = Ext.getCmp(record.id);

 if (record.rawValue === '') {
    control.inputEl.setStyle({    // Die Daten in der Combobox wurde auf 'leer' gesetzt.
      "background-image": 'none',
      "background-color": 'white'
    });

    return;
  }

  var foundInStore = data.any(function (t) { return t.data.text === record.rawValue });

  if (!foundInStore) {
    control.inputEl.setStyle({
      "background-image": 'none',
      "background-color": 'red'
    });

    alert('Bad Code selected');
    control.focus();


  } else {
    control.inputEl.setStyle({
      "background-image": 'none',
      "background-color": 'white'
    });
  }

  control.focus();

};

The Code works, but when I leave the ComboBox with a TAB Jump the Focus is always set to the next control on the form ?!
Can I change that ?

Kind Regards
Peter

[fabricio.murta]

Hello, xtoolz!

Would a setTimeout on your line 27 to, say, 500ms would do it?

You could set a global js variable pointing to the control, for scoping purposes. Something like this:

var controlToFocus;

function delayFocus(control) {
 controlToFocus = control;
 setTimeout(function() { controlToFocus.focus(); }, 500);
}

var validateCodeComboBox = function (record, item, config) {
  
  if (!_pageLoaded)
    return;

  var data = record.store.data.items;
  var control = Ext.getCmp(record.id);

 if (record.rawValue === '') {
    control.inputEl.setStyle({    // Die Daten in der Combobox wurde auf 'leer' gesetzt.
      "background-image": 'none',
      "background-color": 'white'
    });

    return;
  }

  var foundInStore = data.any(function (t) { return t.data.text === record.rawValue });

  if (!foundInStore) {
    control.inputEl.setStyle({
      "background-image": 'none',
      "background-color": 'red'
    });

    alert('Bad Code selected');
    delayFocus(control);


  } else {
    control.inputEl.setStyle({
      "background-image": 'none',
      "background-color": 'white'
    });
  }

    delayFocus(control);

};

It could also exempt you from the need to delay the focus if you ensure you bind your validation for after the focus is set to other control, but this might have other pitfalls (as having to bind the validation to all other fields as any field could be focused by point-and-click).

Does this help you address your issue?

[xtoolz]

Thanks Fabricio

works fine !

Peter

[fabricio.murta]

Glad it worked for you...

Per chance this could interest you. I've done this on Ext.NET 3 but it works on v2 right away (just tested it).

Here, as you fill the text box it checks against the store. On an exact match, it shows so below. If searching a large store, would be wise to add a linger to the change event to trigger as well.

The example on this post (thread: 2 different items created with directmethod / data exchange trouble)

You can add a delay between queries just by adding a delay= argument to the change event (line 142):

<Change Fn="checkEntryExists" Delay="2000" />

Just an alternative, what works for you is best.