オンクリックイベントでフォームフィールド値を取得する方法

Question

私はこのアーキテクチャの記事を使用しています http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/

私のコードで：

私はこのapplication.dashboardform.jsを持っています。これで、onclickイベント関数のfromdateの値を渡したいのですが、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 プロパティまたは使用 find*() で利用可能な方法 Ext.form.FormPanel フォーム要素を取得します。

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