Question

我在表单的视图文件中设置字段中有以下2个组件。

Ext.define('App.view.prospects.Filter', {
    alias:                             'widget.prospectsfilter',
    extend:                            'Ext.form.Panel',
    itemId:                            'prospectsfilter', 

...

initComponent:                      function(){

...

this.testButton = Ext.create('Ext.button.Button', {     
        handler:                    function() {this.fireEvent('testEvent')},
        iconCls:                   'icon-apply_16x16',
        itemId:                    'testButton',
        text:                      'Test'
    });

this.campaignsComboBox = Ext.create('Ext.form.field.ComboBox', {
        anchor:                    '100%',
        displayField:              'name',
        fieldLabel:                'Campaign(s)',
        itemId:                    'campaignsComboBox',
        labelWidth:                 90,
        listConfig:                 {
            minWidth:               150  
        },
        listeners:                  {
            select:                 function() {this.fireEvent('testEvent');}
        },
        multiSelect:                false,
        queryMode:                 'local',
        store:                      this.campaignsStore,
        value:                      null,
        valueField:                'id'
    });

现在，在控制器中，我有：

Ext.define('App.controller.ProspectsFilter', {
    extend:                            'Ext.app.Controller',    
    models:                             ['Prospect'],
    stores:                             ['Prospects'],
    views:                              ['prospects.Filter'],

...

    init:                               function() {
        this.control({
           'prospectsfilter #testButton':{
                testEvent:              function(){console.log('Found #testButton!');}
           },

           'prospectsfilter #campaignsComboBox':{
                 testEvent:              function(){console.log('Found #campaignsComboBox!');}
        }
    }
});

当我点击'testButton'时，我在控制台中看到它被找到的消息。

但是，当我在campaignsComboBox中进行选择时，没有任何反应。

为什么？

更新：

以下是一个很好的测试，但无法确定根本原因。我添加了其他组件进行测试，文本字段的事件被捕获得很好。其他人失败了为什么呢？

这是更新的控制器：

Ext.define('MyApp.controller.ProspectsFilter', {

extend:                            'Ext.app.Controller',

models:                             ['Prospect'],
stores:                             ['Prospects'],
views:                              ['prospects.Filter'],

init:                               function() {

    this.control({
        'prospectsfilter #campaignsComboBox' : {
            render:                 this.comboRender,
            select:                 this.comboSelect
        },
        'prospectsfilter #campaignsDateField' : {
            render:                 this.dateRender,
            select:                 this.dateSelect
        },
        'prospectsfilter #campaignsTextField' : {
            render:                 this.textRender,
            change:                 this.textChange
        }
    });

},

comboRender: function(combobox)  {console.log('comboRender');}, // Never executes.
comboSelect: function(combobox)  {console.log('comboSelect');}, // Never executes.
dateRender:  function(dateField) {console.log('dateRender'); }, // Never executes.
dateSelect:  function(dateField) {console.log('dateSelect'); }, // Never executes.
textRender:  function(textField) {console.log('textRender'); }, // Executes.
textChange:  function(textField) {console.log('textChange'); }  // Executes.
});

以下是更新后的视图：

Ext.define('MyApp.view.prospects.Filter', {

alias:                             'widget.prospectsfilter',
extend:                            'Ext.form.Panel',
itemId:                            'prospectsfilter',

....

initComponent:                      function(){

    ....

    this.dateField = Ext.create('Ext.form.field.Date',{
        fieldLabel:                'Date',
        itemId:                    'campaignsDateField'
    });

    this.textField = Ext.create('Ext.form.field.Text',{
        fieldLabel:                'Text',
        itemId:                    'campaignsTextField'
    });

    this.campaignsComboBox = Ext.create('Ext.form.field.ComboBox', {
        anchor:                    '100%',
        displayField:              'name',
        fieldLabel:                'Campaign(s)',
        itemId:                    'campaignsComboBox',
        labelWidth:                 90,
        listConfig:                 {
            minWidth:               150  
        },
        multiSelect:                false,
        queryMode:                 'local',
        store:                      Ext.create('Ext.data.ArrayStore', {
            fields:                 ['name'],
            data:                   [['entry1'], ['entry2'], ['entry3']]
        }),
        tabindex:                   7,
        value:                      null,
        valueField:                'id'
    });

    this.statusToSegmentFieldSet = Ext.create('Ext.form.FieldSet', {
        anchor:                    '100%',
        autoHeight:                 true,
        collapsed:                  true,
        collapsible:                true,
        defaults:                   {
            editable:               false,
            forceSelection:         false
        },
        items:                      [                                   
            this.dateField,
            this.textField,
            this.campaignsComboBox
        ],
        layout:                    'anchor',
        margin:                    '10 10 10 10',
        title:                     'Dispositions, Campaigns, Segments'
    });

    .......

    var config = {        
        autoRender:                 true,
        autoScroll:                 true,
        bodyStyle:                 'background-color: #F1F1F1;',
        border:                     true,
        //buttons:                    [
        //    this.applyButton,
        //    this.clearButton
        //],
        collapsed:                  false,
        collapsible:                true,
        frame:                      true,
        height:                     200,
        items:                      [
            //this.datePicker,
            //this.dateRangeFieldSet,
            //this.prospectDetailsFieldSet,
            this.statusToSegmentFieldSet
            //this.assignedToFieldSet
        ],
        layout:                    'anchor',
        minWidth:                   300,
        region:                    'east',
        split:                      true,
        stateId:                   'prospectsModuleFilter',
        title:                     'Advanced Filters',
        width:                      300            
    };

    Ext.apply(this, Ext.apply(this.initialConfig, config));
    this.callParent(arguments);

}
});

更新：8月28日：

行。我已经进一步缩小范围，以至于我可以重现JSFiddle中的问题。

希望这能让人很容易找出问题所在。

请阅读JSFiddle的说明：http://jsfiddle.net/4JubT/3/

Answer 1

您确定在您的侦听器中触发了“select”事件吗？尝试登录。

除此之外你为什么要开自定义事件？您可以直接听取控制器中的select事件。

修改我刚刚查看了我的一个项目，并使用了select事件。因此，请尝试登录您启动自定义事件的初始侦听器。

Answer 2

问题是第二个事件侦听器中的'this'关键字设置不正确。

您的按钮事件侦听器正常工作，因为使用'handler'属性来注册侦听器ExtJs会自动将该函数绑定到当前按钮对象。

这是文档对Ext.button.Button#scope所说的内容：

范围：对象执行处理程序和toggleHandler的范围（此引用）。默认为此按钮。

但是，使用'listener'属性注册侦听器时，必须指定'scope'属性，否则'this'引用指向全局窗口对象。

请参阅the docs for the listener property

在您的情况下，最好的方法可能是注册听众：

this.campaignsComboBox = Ext.create('Ext.form.field.ComboBox', { .. });
this.campaignComboBox.on( 'select', 
                          function() { this.fireEvent('testEvent'); }, 
                          /* 'scope' aka 'this' reference: */ this.campaignsComboBox);

<强>更新

这是一个有效的jsfiddle：http://jsfiddle.net/nXSAN/

在侦听器中获取正确引用的另一种方法是使用第一个函数参数，它实际上是对ComboBox对象的引用（如果是select事件）：

    function(cmp) { cmp.fireEvent('testEvent'); }

<强> UPDATE2 Sencha（或我的提供商）在使用Sencha的CDN时遇到麻烦，因此这里是“离线”版本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Extjs</title>
    <link rel="stylesheet" type="text/css" href="extjs-4.1.1/resources/css/ext-all.css"/>
    <script type="text/javascript" src="extjs-4.1.1/ext-all.js"></script>
    <script type="text/javascript">
        Ext.define('App.view.prospects.Filter', {
            alias: 'widget.prospectsfilter',
            extend: 'Ext.form.Panel',
            itemId: 'prospectsfilter',

            height: 50,
            width: 100,
            layout: 'fit',


            initComponent: function() {

                this.combo = Ext.create('Ext.form.field.ComboBox', {
                    itemId: 'campaignsComboBox',
                    text: 'Test',

                    queryMode: 'local',
                    displayField: 'name',
                    valueField: 'name',

                    store: Ext.create('Ext.data.ArrayStore', {
                        fields: ['name'],
                        data: [ ['entry1'], ['entry2'], ['entry3'] ]
                    }),

                    listeners: {
                        select: function() {
                            this.fireEvent('testEvent')
                        }
                    }
                });

                this.items = [
                    this.combo
                ];

                this.callParent(arguments);
            }
        });

        Ext.define('App.controller.ProspectsFilter', {
            extend: 'Ext.app.Controller',

            init: function() {
                this.control({
                    'prospectsfilter #campaignsComboBox': {
                        'testEvent': function() {
                            console.log('Found #campaignsComboBox!');
                        }
                    }
                });
            }
        });

        Ext.application({
            name: 'App',
            autoCreateViewport: false,
            launch: function() {
                Ext.create('App.view.prospects.Filter', { renderTo: Ext.getBody() });
                var controller = Ext.create('App.controller.ProspectsFilter', { application: this });
                controller.init(this);
            }
        });
    </script>
</head>
<body></body>
</html>

Answer 3

编辑：你是对的＃也可以归结为itemId属性 - 我也不知道，谢谢！是的，不建议使用ID属性。

所以我把你的组合框放到我的jsfiddle示例中，让它正常工作。我不认为您的代码有任何问题，也许您使用的是过时的库版本？看看：http://jsfiddle.net/dbrin/etxwP/点击“创建”按钮显示表单 - 抱歉旧例子。

编辑2： http://jsfiddle.net/dbrin/4JubT/6/你有一个依赖问题，并且不能对所有类使用ext-all。

为什么这些选择器在this.control（）中的ExtJS ComboBox失败？

3 个答案: