ExtJs 更改事件不会在日期时间更改时触发答案

【问题标题】：ExtJs change event wont fire on the change of the date timeExtJs 更改事件不会在日期时间更改时触发
【发布时间】：2013-09-19 15:10:36
【问题描述】：

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

这是控制器定义：

  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 和filterOrderDateTo 外，所有事件均正确触发。有人知道为什么吗？

【问题讨论】：

标签： javascript css-selectors dom-events extjs4 extjs4.2

【解决方案1】：

你试图让你的选择器沿着那条确切的路径追踪，真的让它们很复杂。如果你完全改变你的包装容器，你将不得不返回并改变你的选择器，这可能是一个非常令人头疼的问题。

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

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

如果您需要更精确的选择器，请提供字段 itemIds 并使用它：

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

【讨论】：

是的，这对我来说根本不起作用。但感谢 zou 提供了面板提示。我把它改成了面板，它工作了。