如何在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”的 ID，因此您可以使用 Ext.getCmp() 引用它，并从那里调用其 getValue() 方法：

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

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

Answer 2

设置按钮“Go”的范围，以便您可以在处理程序方法中访问表单。通过这样做，您将可以从处理程序方法访问表单。

现在，要访问表单元素，您可以使用 ref 属性或使用 Ext.form.FormPanel 中提供的 find*() 方法获取表单元素。

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

    fromdate = this.findById('fromdate');

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

}

使用 ref 属性时，为 formdata 字段设置 ref：

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