Search code examples
javascriptoopextjsextjs4

How do I make a button add a day to a datefield


I'm having trouble figuring out how to do this the 'right' way - or at least make it work, and I am by no means an expert on either js or Extjs.

Goal

Create a panel with a datepicker, and simple controls to go to the given date or go to the previous/next day made in Extjs 4. It is to be a part of a php application for displaying a given days schedule in an html table. The only thing this question concerns is how to create the datepicker properly in Extjs.

I've taken a screenshot of the Extjs part of my application to give an idea of the usage: https://i.sstatic.net/XK59V.png

Problem

I think I've made the basic structure of the code, but I'm having trouble getting the prev and next buttons to add or substract a day from the datefield. I've made two functions,prevDate() and nextDate(), within the datefield item to show what I want to achieve, but I'm pretty sure thats not how to do it.

How would I go about that? If I'm supposed to do it with my own functions, where do I add them and how do I add them?

I've got a refference to the datefield inside the handler for the prev and next buttons, but I'd rather not do it this way - any suggestion on how to design this better?

Since this is some of my first experience with Extjs 4, I'd also like to do it the 'right' way, or at least not make something too crude.

Code

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();
        }
    }]
});

I'm currently doing the MVC tutorial from Sencha in my spare time, but I'm having a hard time translating what I'm doing there to something of this small scale. It seems to be too complex for what I'm trying to achieve here, no? Feel free to point out better ways to go about this.

Any input is very much appreciated.


Edit: I'd totally forgotten about the datefield.setValue(Date) function, and now I'm able to go to the previous or next date by setting the handler of the prev and next buttons like this:

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));
}

I'm still unsure if this is the right way to do this. It feels kind of 'dirty'


Solution

  • if you want to perform date calculations...
    you must to convert it first to timestamp format. and convert it back the result to date format...

    here my sample

    and if you want to run some of your custom functions, dont append it in your config component (even it may work).. i will prefer to make my own instance class. take look at this

    and one more thing,.... button doesn't have name config.
    have you read the doc api ???