Monday 8 April 2013

How to avoid showing old data on extjs comobox while querying.

Problem:  When I click on combobox. It shows the old data in blur before it display new data. Some time it does not  allow me to select  the combobox.  Those kind of issue will appear only when you load combobox as raw static data and then try to load using query.

Solution:

        xtype: 'combobox',
        name: 'interNalFaeId',
        itemId: 'interNalFaeId',
        fieldLabel: 'Arrow FAE',
        editable: false,
        listeners: {
          beforequery: function(queryEvent) {
            if (queryEvent.combo.lastQuery !== queryEvent.query) {
              queryEvent.combo.store.removeAll();
            }
          },
          scope: me

        }

How to handle special key TAB or ENTER for EXTJs combobox to trigger.

Requirement is to trigger EXTJS combobox to trigger on tab change and press of enter key.
Below code is solution for above requirement.

        xtype: 'partsearchlov',
        name: 'partNumber',
        displayField: 'concatSegPartNum',
        valueField: 'concatSegPartNum',
        fieldLabel: 'Arrow Part',
        allowBlank: false,
        cls: 'required',
        minChars: 2,
        triggerAction: 'query',
        labelWidth: 80,
        listeners: {
          specialkey: function(field, e) {
            var val;
            if (e.getKey() === e.ENTER || e.getKey() === e.TAB) {
              val = field.getRawValue();
              if ( typeof val !== 'undefined') {
                if (val.indexOf('^') !== -1) {
                  val = val.slice(0, val.indexOf('^'));
                }
                field.doQuery(val, true, true);
              }
            }
          },
          scope: me

        }