Question

我想将我的DatePicker处理程序事件移动到控制器中。但我不知道如何捕捉处理程序事件。

Ext.define('MyApp.view.MyGridPanel', {  
...........
    dockedItems:[
        {
            xtype:'toolbar',
            items:[
                {
                    id:'span3',
                    enableToggle:true,
                    text:'start date',
                    toggleGroup:'span',
                    scope:this,
                    menu:Ext.create('Ext.menu.DatePicker', {
                        handler:function (dp, date) {
                            grid=Ext.getCmp('MyGridPanelId');
                            var D = Ext.Date;
                            grid.startDate = date;

                            grid.setTimeSpan(D.add(date, D.HOUR, 8), D.add(grid.endDate, D.HOUR, 18));
                            debugger;
                        },
                        scope:this
                    })
                },

Answer 1

您创建一个控制器并监听select事件，简单示例：

Ext.define('MyApp.controller.MyGridPanel', {
extends: 'Ext.app.Controller',
init: function() {
    this.control( 'toolbar > menu > datemenu', this.onDateSelect );
},
onDateSelect: function(dp, date) {
    grid=Ext.getCmp('MyGridPanelId');
    var D = Ext.Date;
    grid.startDate = date;
    grid.setTimeSpan(D.add(date, D.HOUR, 8), D.add(grid.endDate, D.HOUR, 18));
    debugger;
}

...........

请注意，这会捕获您的所有DateMenu select个事件，您可能希望在this.control('...'上使用更专业的选择器。

Answer 2

您可以制作菜单处理程序以触发网格的自定义事件。然后通过controll方法在控制器中捕获它。

这项技术在this answer中被删除。

更新

我的解决方案有点开销，因为有一些选择器组合可用于捕获菜单的事件而不会触发自定义事件。尝试以下选择器之一：

'gridpanel datemenu'
'#MyGridPanelId datemenu'
'gridpanel #span3'
'#span3'

例如：

// controller
// ...
init: function() {
    this.control({
       '#span3': {
           select: this.onDateSelect
       }
    });
},
onDateSelect: function(dp, date) {
    // ...
    debugger;
}

Ext js如何将日期选择器处理程序移动到控制器中

2 个答案:

更新