I have a transform ComboBox in extjs4:

<script>   

Ext.onReady(function() {
        Ext.tip.QuickTipManager.init();

        var transformed = Ext.create('Ext.form.field.ComboBox', {
            typeAhead: true,
            transform: 'DisplayListID',
            forceSelection: true
        });
    });
  </script>



 <select  id="DisplayListID" onChange="change();">
      <option> ...

    </select>

ExtJS successfully transform my HTML select into a ComboBox but when I select an element, the onChange event is not fired.

How can I bind the javascript function change() to my transform CombBox?

I have a transform ComboBox in extjs4:

<script>   

Ext.onReady(function() {
        Ext.tip.QuickTipManager.init();

        var transformed = Ext.create('Ext.form.field.ComboBox', {
            typeAhead: true,
            transform: 'DisplayListID',
            forceSelection: true
        });
    });
  </script>



 <select  id="DisplayListID" onChange="change();">
      <option> ...

    </select>

ExtJS successfully transform my HTML select into a ComboBox but when I select an element, the onChange event is not fired.

How can I bind the javascript function change() to my transform CombBox?

• javascript
• extjs
• bobox
• extjs4

2 Answers 2

Use a ExtJs change event by adding a listener to the bobox :

listeners: {
    change: change
}

where the second change is your function.

Lorenz is right, you should use change listener, however if you are trying to convert several bos at the same time and those bos already have defined functions you will need to manually link each new transformed bo with its handler method and this could be a real nightmare. You can however subclass ComboBox control and let it handle the method linkage automatically, for this you must take into account that original 'select' gets removed after ComboBox control gets initialized. So you must get sure to keep a reference to the target method before calling the parent ComboBox init method, otherwise you will not be able to get it, something like:

initComponent: function() {
    var me = this,
        transform = me.transform,
        transformSelect,
        transformMethod;

    // Check if transform id has been supplied
    if(transform) {        
        // Attempt to retrieve target select from the DOM
        transformSelect = Ext.getDom(transform);
        // Get sure select node exists 
        if (transformSelect) {
            // Keep a reference to target method
            transformMethod = transformSelect.onchange;
        }
    }

    // Now that we have the method info
    // Allow ComboBox init method to replace original
    // select tag with ExtJs Control
    me.callParent(arguments);

    // Bind change event with original handler method
    me.on('change', transformMethod, me);
}

I've created a full working example here. I hope you find it useful.