目标

使用日期选择器创建一个面板，并使用简单控件转到给定日期或转到Extjs 4中的上一个/下一个日期。它将成为php应用程序的一部分，用于显示给定的日期计划。 html表。这个问题唯一关注的是如何在Extjs中正确创建日期选择器。

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

问题

我认为我已经制作了代码的基本结构，但是我无法使用上一页和下一页按钮来添加或减去datefield中的一天。我在日期字段项目中创建了两个函数prevDate()和nextDate()，以显示我想要实现的内容，但我非常确定不会如何操作。

我该怎么做？如果我应该用自己的功能来做，我在哪里添加它们，如何添加它们？

我已经对datefield和prev按钮的处理程序中的next进行了引用，但我不想这样做 - 任何关于如何更好地设计这个的建议？

因为这是我第一次使用Extjs 4时的一些经历，所以我也喜欢这样做，而且＃39;方式，或者至少不要做太粗暴的事情。

代码

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来转到上一个或下一个日期1}}这样的按钮：

next

我仍然不确定这是否是正确的方法。感觉有点肮脏＆＃39;

Answer 1

我认为您的部分问题是您尝试设置value属性而不是调用Ext.picker.Date的{{1}}方法。

我还会重写你的处理程序，看起来像这样：

setValue

另外，仅供参考，在为组件设置ID时，您可以使用handler: function() { var datefield = this.up('panel').getComponent('extDatepicker'); console.log(datefield); datefield.nextDate(); }代替itemId。 id与容器相关，而itemId是可在整个页面中搜索的全局ID。因此，具有相同值的多个id可以在同一个应用程序中共存，前提是它们不在同一个容器中。

itemId允许您使用up从当前按钮跳转到面板以搜索容器，然后使用xtype转到日期选择器。< / p>

Answer 2

如果你想进行日期计算......
您必须先将其转换为时间戳格式。并将结果转换回日期格式......

这是我的sample

如果你想运行一些自定义函数，不要将它附加到您的配置组件中（即使它可能工作）.. 我宁愿自己创建实例类。看看this

还有一件事，......按钮没有name配置你读过doc api ???

如何使按钮为日期字段添加一天

目标

问题

代码

2 个答案: