CODEWITHSUNDEEP
extjsinputtriggers
Voodoo
Voodoo

Reputation: 1024

Pressing "enter" in ExtJS-generated search box not working in IE

I inherited some code and I'm trying to isolate a bug that we found in IE only. ExtJS is used to generate a searchbox. Ext creates an <img> that acts as the trigger for searching.

In IE, you can click on the img to submit the search. However, if you press enter it activites an onClick button that appears farther down the page. Code below. How can I make sure the 'specialkey' is assigned to trigger the search? (I'm a little unclear why it works ok in non-IE browsers).

Ext.onReady(function(){
// create user extensions namespace (Ext.ux.form)
Ext.namespace('Ext.ux.form');

//  Ext.ux.form.SearchableTextField constructor
Ext.ux.form.SearchableTextField = function(config) {
    // call parent constructor
    Ext.ux.form.SearchableTextField.superclass.constructor.call(this, config);
    // associate ENTER key with button click
    this.on('specialkey', function(f, e) {
        if (e.getKey() == e.ENTER) {
            this.onTriggerClick();
        }
    }, this);
} // end of Ext.ux.form.SearchableTextField constructor

// extend
Ext.extend(Ext.ux.form.SearchableTextField, Ext.form.TriggerField, {
    triggerClass: 'x-form-search-trigger',
    onTriggerClick : function() {
        alert('customize in you app code');
    }
}); // end of extend
var tb = new Ext.Toolbar({
    renderTo: 'searchbox'
});

var search = new Ext.ux.form.SearchableTextField({
    triggerClass:'x-form-search-trigger banner-searchbox-submit',
    id:'banner-searchbox',
    width:100,
    onTriggerClick: function(){
        var x = this.getRawValue();
        this.setRawValue('');
        document.forms[0].method = 'post';
        document.forms[0].action = 'find.php?site=<?=$site?>&lang=<?=$lang?>';
        document.forms[0].qrystring.value = x;
        var pN = document.getElementById("pageNum");
        if (pN != null) {  
            document.forms[0].pageNum.value = 1;
        }
        document.forms[0].submit();
    }
});
var searchPat = tb.add('-','<?=$menuPatients[$lang][2]?>: ', ' ', search);
tb.doLayout();

Upvotes: 1

Views: 1708

Answers (1)

JamesHalsall
JamesHalsall

Reputation: 13485

It's possibly a scope issue, try changing your definition of Ext.ux.form.SearchableTextField to this

Ext.ux.form.SearchableTextField = function(config) {
  var me = this;
  // call parent constructor
  Ext.ux.form.SearchableTextField.superclass.constructor.call(me, config);
  // associate ENTER key with button click
  me.on('specialkey', function(f, e) {
    if (e.getKey() == e.ENTER) {
        me.onTriggerClick();
    }
  }, me);
}

Upvotes: 1

Related Questions