Как получить значение поля формы в событии onclick

Question

Я использую эту статью архитектуры http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/

в своем коде:

У меня есть этот Application.DashBoardForm.js, в котором я хочу передать значение fromdate вФункция события onclick, как я могу передать значение fromdate?

Ext.apply(Ext.form.VTypes, {
    daterange : function(val, field) {
        var date = field.parseDate(val);

        if(!date){
            return false;
        }
        if (field.startDateField) {
            var start = Ext.getCmp(field.startDateField);
            if (!start.maxValue || (date.getTime() != start.maxValue.getTime())) {
                start.setMaxValue(date);
                start.validate();
            }
        }
        else if (field.endDateField) {
            var end = Ext.getCmp(field.endDateField);
            if (!end.minValue || (date.getTime() != end.minValue.getTime())) {
                end.setMinValue(date);
                end.validate();
            }
        }
        /*
         * Always return true since we're only using this vtype to set the
         * min/max allowed values (these are tested for after the vtype test)
         */
        return true;
    }
});

Application.DashBoardForm= Ext.extend(Ext.FormPanel, {
     border:false
    ,initComponent:function() {
        var config = {
            labelWidth: 125,
            frame: true,
            title: 'Date Range',
            bodyStyle:'padding:5px 5px 0',
            width: 350,
            defaults: {width: 175},
            defaultType: 'datefield',
            items: [{
                fieldLabel: 'Start Date',
                name: 'fromdate',
                id: 'fromdate',
                vtype: 'daterange',
                value : new Date(),
                endDateField: 'todate' // id of the end date field
            },{
                fieldLabel: 'End Date',
                name: 'todate',
                id: 'todate',
                vtype: 'daterange',
                value : new Date(),
                startDateField: 'fromdate' // id of the start date field
            }]
            ,buttons: [{
                text: 'Go',
                onClick : function () {
                    // here i want to access the value of the form field 
                    // how can i access the fromdate value so that i pass it to grid 
                    console.log(this.getForm());
                    var win = new Ext.Window({
                         items:{xtype:'DashBoardGrid',fromdate:this}
                    });
                    win.show();
                }
            }]
        }; // eo config object

        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));

        Application.DashBoardForm.superclass.initComponent.apply(this, arguments);
    } // eo function initComponent
   ,onRender:function() {
        // this.store.load();
        Application.DashBoardForm.superclass.onRender.apply(this, arguments);
    } // eo function onRender
});

Ext.reg('DashBoardForm', Application.DashBoardForm);

Как передать значение даты здесь в функцию onclick?

Answer 1

Поскольку вы дали полю идентификатор «fromdate», вы можете ссылаться на него с помощью Ext.getCmp () и оттуда вызывать его метод getValue ():

var field = Ext.getCmp('fromdate');

var win = new Ext.Window({
    items: {
        xtype: 'DashBoardGrid',
        fromdate: field.getValue()
    }
});

Answer 2

Установите область действия вашей кнопки «Перейти», чтобы у вас был доступ к форме в методе обработчика.Сделав это, вы получите доступ к форме из метода-обработчика.

Теперь, чтобы получить доступ к элементу формы, вы можете использовать свойство ref или find*() методы, доступные в Ext.form.FormPanelчтобы получить элемент формы.

text: 'Go',
scope: this,
handler: function () {

    fromdate = this.findById('fromdate');

    // extract date value and use it...
    value = fromdate.getValue();

}

При использовании свойства ref установите ref для поля formdata:

ref: '../formdate'
fieldLabel: 'Start Date',
name: 'fromdate',
id: 'fromdate',
vtype: 'daterange',
value : new Date(),
endDateField: 'todate' // id of the end date field

И вы сможете получить доступ к элементу формы через формуобъект в обработчике.

this.formdate.getValue()