1

我在表单上的视图文件中设置的字段中有以下 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/

4

3 回答 3

0

编辑：你是正确的 # 也可以归因于 itemId 属性 - 我不知道，所以谢谢！是的，不推荐使用 ID 属性。

因此，我将您的组合框放入我的 jsfiddle 示例中，并使其正常工作。我认为您的代码没有任何问题，也许您使用的是过时的库版本？看一看： http: //jsfiddle.net/dbrin/etxwP/ 单击创建按钮以显示表单 - 抱歉旧示例。

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

于 2012-08-20T21:59:49.347 回答
0

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

您的按钮事件侦听器可以正常工作，因为通过使用“处理程序”属性来注册侦听器 ExtJs 将函数自动绑定到当前按钮对象。

这就是文档所说的Ext.button.Button#scope：

scope : Object 执行处理程序和切换处理程序的范围（此引用）。默认为此按钮。

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

查看listener 属性的文档

在您的情况下，最好的方法可能是像这样注册侦听器：

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>
于 2012-08-20T15:24:03.290 回答
0

您确定“选择”事件会在您的侦听器中触发吗？尝试在那里登录。

除此之外，您为什么要触发自定义事件？您可以直接收听控制器中的选择事件。

编辑 我刚刚查看了我的一个项目，我们使用了 select 事件。因此，请尝试登录您触发自定义事件的初始侦听器。

于 2012-08-20T14:42:41.573 回答