ExtJs更改事件不会触发日期时间的更改

时间:2013-09-19 15:10:37

标签: javascript javascript-events extjs4 css-selectors extjs4.2

我在控制器中有一个处理程序,它触发了一些元素,但没有触发日期时间元素,我不知道如何让它们工作。

这是控制器定义:

  this.control({

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

这是设计:

    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'
                            }]
                    }

除了filterOrderDateFrom ad filterOrderDateTo之外,所有事件都会正确触发。任何人都知道为什么?

1 个答案:

答案 0 :(得分:0)

你真的是通过试图让他们沿着那条确切路径走下去来扼杀你的选择者。如果你根本改变你的包装容器,你将不得不返回并改变你的选择器,这可能是一个巨大的麻烦。

在您当前的代码中,您似乎尝试通过panel,但您的视图使用了container。尝试简化选择器:

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

如果您需要更精确的选择器,请提供字段itemId并使用:

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