Cómo obtener el valor de campo de formulario en el evento OnClick

Question

Estoy usando este artículo de arquitectura http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/

En mi código:

Tengo esta aplicación. DashboardForm.js En esto quiero pasar el valor de la función de la función en la función del evento OnClick, ¿cómo puedo pasar el valor de la fecha?

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

¿Cómo puedo pasar el valor de la fecha aquí en la función OnClick?

Answer 1

Siendo que le dio al campo una identificación de 'fronDaTate', puede hacer referencia a él usando ext.getcmp () y desde allí llame a su método getValue ():

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

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

Answer 2

Establezca el alcance de su botón 'Go', para que tenga acceso a la forma dentro del método del controlador. Al hacer esto, tendrá acceso al formulario desde el método del controlador.

Ahora, para obtener acceso al elemento de formulario, puede usar ref propiedad o uso find*() Métodos disponibles en Ext.form.FormPanel Para obtener el elemento de formulario.

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

    fromdate = this.findById('fromdate');

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

}

Al usar la propiedad REF, establezca una ref para el campo FormData:

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

Y debería poder acceder al elemento de formulario a través del objeto de formulario en el controlador.

this.formdate.getValue()