javascript - 如何让按钮在日期字段中添加一天

Question

我很难弄清楚如何以“正确”的方式做到这一点 - 或者至少让它发挥作用，而且我绝不是 js 或 Extjs 方面的专家。

目标

创建一个带有日期选择器的面板，以及用于转到给定日期或转到 Extjs 4 中制作的前一天/第二天的简单控件。它将成为 php 应用程序的一部分，用于在表格。这个问题唯一关心的是如何在 Extjs 中正确创建日期选择器。

我截取了我的应用程序的 Extjs 部分的屏幕截图，以了解其用法: http://i.imgur.com/IoZ9f.png

问题

我想我已经制定了代码的基本结构，但是我无法让上一个和下一个按钮从 datefield 中添加或减去一天。 .我做了两个函数，prevDate()和 nextDate() ，在日期字段项中显示我想要实现的目标，但我很确定那不是怎么做的。

我该怎么做？如果我应该用我自己的函数来做，我应该在哪里添加它们以及如何添加它们？

我有一个对 datefield 的引用在 prev 的处理程序中和 next按钮，但我宁愿不这样做 - 关于如何更好地设计它的任何建议？

因为这是我第一次使用 Extjs 4 的一些经验，所以我也想以“正确”的方式来做，或者至少不要做得太粗糙。

代码

var datePanel = Ext.create('Ext.panel.Panel', {
    layout: {
        type: 'hbox'
    },
    renderTo: 'date-controls',
    width: 258,
    height: 43,
    bodyPadding: 10,
    items: [{
        xtype: 'datefield',
        anchor: '60%',
        name: 'datepicker',
        id: 'extDatepicker',
        cls: 'datepicker',
        value: new Date(),
        handler: function(picker, date) {
            picker.value = date; 
        },

        /*These two functions doesn't work because they don't actually 
          have a reference to the picker - Is it event the correct way 
          to add functions to the datefield?*/
        nextDate: function(picker, date) {
            picker.value = Ext.Date.add(picker.value, Ext.Date.DAY, 1);
        },
        prevDate: function(picker, date) {
            picker.value = Ext.Date.add(picker.value, Ext.Date.DAY, -1);
        }
    },{
        xtype: 'button',
        name: 'go',
        text: 'GO',
        scope: this, 
        cls: 'ext-button-go',
        handler: function() {
            //TODO
        }
    },{
        xtype: 'button',
        name: 'prev',
        text: '<',
        cls: 'ext-button',
        handler: function() {

                    /*This looks crude and wrong, 
                      I would much rather pass a reference or something*/
            var datefield = datePanel.items.getAt(0);
            console.log(datefield);
            datefield.prevDate();
        }
    },{
        xtype: 'button',
        name: 'next',
        text: '>',
        cls: 'ext-button',
        handler: function() {
            var datefield = datePanel.items.getAt(0);
            console.log(datefield);
            datefield.nextDate();
        }
    }]
});

我目前正在做 MVC tutorial from Sencha在我的业余时间，但我很难将我在那里所做的事情转化为这种小规模的事情。对于我要在这里实现的目标来说，这似乎太复杂了，不是吗？请随意指出解决此问题的更好方法。

非常感谢任何输入。

---

编辑:我完全忘记了 datefield.setValue(Date)功能，现在我可以通过设置 handler 转到上一个或下一个日期的 prev和 next像这样的按钮:

xtype: 'button',
name: 'prev',
text: '<',
cls: 'ext-button',
handler: function() {
    var datefield = datePanel.items.getAt(0);
    datefield.setValue(Ext.Date.add(datefield.value, Ext.Date.DAY, -1));
}

我仍然不确定这样做是否正确。感觉有点“脏”

Answer 1

我认为你的部分问题是你试图设置一个 value 属性而不是调用 Ext.picker.Date 的 setValue方法。

我还会重写您的处理程序，使其看起来像这样:

handler: function() {
    var datefield = this.up('panel').getComponent('extDatepicker');
    console.log(datefield);
    datefield.nextDate();
}

此外，仅供引用，在为组件设置 ID 时，您可以使用 itemId 而不是 id。 itemId 是相对于容器的，而 id 是一个全局 ID，可在整个页面中搜索。因此，具有相同值的多个 itemId 可以在同一个应用中共存，前提是它们不在同一个容器中。

up 允许您使用 xtype 搜索容器从当前按钮向上跳转到面板，然后使用 获取组件。