ExtJs change event wont fire on the change of the date time

Question

I have a handler in a controller which fires for some of the elements but not for date time elements, I have no idea how to make them work.

Here is the controller definition:

  this.control({

            'documentmailboxlist [itemId=filtersPanel] > container > combo': {
                change: this.filterInboxDocuments
            },
            'documentmailboxlist [itemId=filtersPanel] > panel > datefield': {
                change: this.filterInboxDocuments
            },
   .....

And here is the design:

    this.dockedItems = [
        {
            id: 'filtersPanel',
            xtype: 'container',
            itemId: 'filtersPanel',
            minWidth: 500,
            autoScroll: true,
            items: [

{
                        xtype: 'container',
                        dock: 'top',
                        layout: 'column',
                        defaults: {
                            margin: 7
                        },
                        autoScroll: true,
                        items: [
                            {
                                id: 'filterOrderDateFrom',
                                xtype: 'datefield',
                                fieldLabel: Translation.MailboxListDockedItemOrderDateFrom,
                                itemId: 'filterOrderDateFrom',
//                                flex: 1,
                                labelWidth: 110,
                                minWidth: 170,
//                                maxWidth: 180,
                                cls: 'filterInputField',
                                labelCls: 'webEdiInputLabelCenter'
                            },
                            {
                                id: 'filterOrderDateTo',
                                xtype: 'datefield',
                                fieldLabel: Translation.MailboxListDockedItemOrderDateTo,
                                itemId: 'filterOrderDateTo',
//                                flex: 1,
                                labelWidth: 110,
                                minWidth: 170,
//                                maxWidth: 180,
                                cls: 'filterInputField',
                                labelCls: 'webEdiInputLabelCenter'
                            },
                            {
                                id: 'filterDateFrom',
                                xtype: 'datefield',
                                fieldLabel: Translation.MailboxListDockedItemDateFrom,
                                itemId: 'filterDateFrom',
//                                flex: 1,
                                labelWidth: 65,
                                minWidth: 135,
//                                maxWidth: 145,
                                cls: 'filterInputField',
                                labelCls: 'webEdiInputLabelCenter'
                            },
                            {
                                id: 'filterDateTo',
                                xtype: 'datefield',
                                fieldLabel: Translation.MailboxListDockedItemDateTo,
                                itemId: 'filterDateTo',
//                                flex: 1,
                                labelWidth: 65,
                                minWidth: 135,
//                                maxWidth: 145,
                                cls: 'filterInputField',
                                labelCls: 'webEdiInputLabelCenter'
                            }]
                    }

All events fire correctly except the filterOrderDateFrom and filterOrderDateTo. Anyone any idea why?

score 0 · Answer 1 · answered Sep 19 '13 at 15:34

You're really convoluting your selectors by trying to make them trail down that exact path. If you change your wrapping containers at all, you'll have to go back and change your selectors too, and that can be a huge headache.

In your current code, it looks like you are trying to go through a panel but your view uses a container. Try simplifying your selectors:

this.control({
    'documentmailboxlist #filtersPanel datefield' : {...}
})

If you need more exact selectors, give the fields itemIds and use that:

this.control({
    'documentmailboxlist #filtersPanel #myDate' : {...}
})

Ye that one doues not work at all by me. But thank zou fot the panel tip. i changed it to panel and it worked. — Sangoku, Sep 20 '13 at 08:55

ExtJs change event wont fire on the change of the date time

1 Answers1