Как заставить кнопку добавить день в поле даты - PullRequest
Новая
       4

Как заставить кнопку добавить день в поле даты

2 голосов
/ 26 января 2012

Мне трудно понять, как сделать это «правильным» способом - или, по крайней мере, заставить его работать, и я ни в коем случае не эксперт по js или Extjs.

Цель

Создайте панель с датчиком и простыми элементами управления, чтобы перейти к указанной дате или перейти к предыдущему / следующему дню, выполненному в Extjs 4. Он должен быть частью приложения php для отображения графика заданных дней вHTML-таблица.Единственный вопрос, который касается этого вопроса, - как правильно создать средство выбора даты в 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 от 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));
}

Я все еще не уверен, правильно ли этоспособ сделать это.Кажется "грязным"

Ответы [ 2 ]

2 голосов
/ 26 января 2012

Я думаю, что часть вашей проблемы в том, что вы пытаетесь установить свойство value вместо вызова Ext.picker.Date setValue метода.

Я бы также переписал ваши обработчики так: 

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

Кроме того, к вашему сведению, вы можете использовать itemId вместо id при настройке идентификаторов для компонента. itemId относится к контейнеру, тогда как id - это глобальный идентификатор, доступный для поиска по всей странице. Таким образом, несколько itemId с одним и тем же значением могут сосуществовать в одном приложении, если они не находятся в одном и том же контейнере.

up позволяет перейти от текущей кнопки к панели с помощью xtype для поиска контейнера, а затем перейти к средству выбора даты с помощью getComponent.

0 голосов
/ 26 января 2012

, если вы хотите выполнить вычисления даты ...
Вы должны сначала преобразовать его в формат метки времени. и преобразовать его обратно в формат даты ...

вот мой образец

и если вы хотите запустить некоторые из своих пользовательских функций, не добавляйте его в свой конфигурационный компонент (даже он может работать) .. Я предпочту сделать свой собственный экземпляр класса. взгляните на это

и еще одна вещь, кнопка .... не имеет конфигурации name.
ты читал документацию API ???

...