Ext js how move date picker handler into controller

Question

I want move my DatePicker handler event into controller. But i do not know how catch handler event there.

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

score 1 · Accepted Answer · answered Nov 23 '12 at 12:34

You create a controller and listen for the select event, simple example:

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

...........

Be aware that this will catch all your DateMenu select events, you probably want to use a more specialized selector on this.control('...'.

@user1827016 your comment doesn't help. Explain how its not working. Maybe consider editing your question to provide more details about what you have tried (source code) and what the results were. — BenSwayne, Nov 24 '12 at 00:33

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

You can make menu handler to fire grid's custom event. And then catch it in your controller via controll method.

This technique is descreibed in this answer.

Update

My preveous solution is a bit of overhead as there are selector combinations that you can use to catch menu's events without firing custom events. Try one of these selectors:

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

for example:

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

edited May 23 '17 at 11:56

Community

1
1

answered Nov 23 '12 at 12:32

Molecular Man

22,277
3
72
89

can you give me some example. How i can cath handler? I tried so much selectors... – user1827016 Nov 23 '12 at 16:29
@user1827016 updated answer. Give it a try now. – Molecular Man Nov 23 '12 at 18:01

Ext js how move date picker handler into controller

2 Answers2

Update