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

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