Come ottenere il valore del campo del modulo nell'evento OnClick

Question

Sto usando questo articolo di architettura http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/

Nel mio codice:

Ho questa applicazione.dashboardform.js In questo voglio passare il valore della data nella funzione evento onClick, come posso passare il valore dadate?

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

Come posso passare il valore di data qui nella funzione OnClick?

Answer 1

Dato che hai dato al campo un ID di "FromDate", puoi fare riferimento a Ext.getCmp () e da lì chiamare il suo metodo getValue ():

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

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

Answer 2

Imposta l'ambito del tuo pulsante "GO", in modo da avere accesso al modulo all'interno del metodo del gestore. In questo modo, avrai accesso al modulo dal metodo del gestore.

Ora, per accedere all'elemento del modulo, puoi usare ref proprietà o utilizzo find*() Metodi disponibili in Ext.form.FormPanel Per ottenere l'elemento modulo.

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

    fromdate = this.findById('fromdate');

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

}

Quando si utilizza Ref Property, impostare un ref per il campo FormData:

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

E dovresti essere in grado di accedere all'elemento modulo tramite l'oggetto modulo nel gestore.

this.formdate.getValue()