ExtJS4转换Combobox onchange()事件不起作用

时间:2014-03-01 15:53:42

标签: javascript extjs combobox extjs4

我在extjs4中有一个变换ComboBox

<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成功将我的HTML select转换为ComboBox但是当我选择一个元素时,onChange事件不会被触发。

如何将javascript函数change()绑定到我的转换CombBox

2 个答案:

答案 0 :(得分:4)

通过向组合框添加侦听器来使用ExtJs更改事件:

listeners: {
    change: change
}

第二个更改是您的功能。

答案 1 :(得分:3)

Lorenz是对的,你应该使用change listener,但如果你想同时转换几个组合并且那些组合已经定义了功能,你需要手动链接每个新的变换组合与其处理程序方法,这可能是一个真正的噩梦。但是,您可以继承ComboBox控件并让自动处理方法链接,为此您必须考虑到ComboBox控件后原始的'select'被删除得到初始化。所以你必须确保在调用父ComboBox init方法之前保留对目标方法的引用,否则你将无法获得它,如:

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);
}

我已经创建了一个完整的工作示例 here。我希望你觉得它很有用。