javascript - ExtJS 5 で JavaScript がフォームへの参照を取得できない

Question

ログインフォームがあり、ExtJS 5 を使用しています。フォームへの参照を取得するために 4 以降で使用した関数を使用しようとしていますが、うまくいきません。

以下はフォームです。

Ext.require([
    'Ext.form.*',
    'Ext.Img',
    'Ext.tip.QuickTipManager'
]);

Ext.define('APP.view.core.forms.Loginform', {
    extend: 'Ext.window.Window',
    xtype: 'form-login',
    id: 'loginForm',


    title: 'Login',
    frame:true,
    width: 320,
    bodyPadding: 10,

    defaultType: 'textfield',

    items: [{
        allowBlank: false,
        fieldLabel: 'Email',
        name: 'email',
        emptyText: 'test@example.com'
    }, {
        allowBlank: false,
        fieldLabel: 'Password',
        name: 'password',
        emptyText: 'password',
        inputType: 'password'
    }],

    buttons: [{
            text:'Login',
            action: 'loginSubmit'
        }],

    initComponent: function() {
        this.defaults = {
            anchor: '100%',
            labelWidth: 120
        };

        this.callParent(arguments);
    }
});

そして、これが私のコントローラーです（ExtJS 5が採用するMVVMの方法は知りません）：

init: function() {
    this.control({
        // Login form button
        'button[action=loginSubmit]' : {
            click: this.loginAction
        }
    });
},

loginAction: function(button, event) {
      console.info('login button interaction.');
        // Reference to the the window
        var loginWindow = button.up('window');
        var loginForm = loginWindow.down('form-login');
        console.log(loginForm.getValues());

        var loginMask = new Ext.LoadMask({
            target: Ext.getCmp('loginForm'),
            msg: "Please wait."
        }).show();

        // Send AJAX request
        Ext.Ajax.request({
            url: '/user/login',
            method: 'post',
            success: function(response){
                var responseValues = Ext.decode(response.responseText);
                loginWindow.close();
                //Didn't return a 404 or 500 error, hide mask
                loginMask.hide();
                //Show user success message
                Ext.Msg.show({
                    title: 'Login successful',
                    msg: responseValues.msg,
                    buttons: Ext.Msg.OK
                });
                //refresh store from combobox value
                //var store = Ext.getCmp('adminslist').getStore();
                //store.load();
            },
            failure: function(){
                loginWindow.close();
                loginMask.hide();
                Ext.Msg.show({
                    title: 'Login failed',
                    msg: 'Login failed please contact the development team',
                    buttons: Ext.Msg.OK,
                    icon: Ext.Msg.ERROR
                });
            }
        });
    },

このセクションでは、フォームへの参照を取得してから値への参照を取得しようとしています...

// Reference to the the window
var loginWindow = button.up('window');
var loginForm = loginWindow.down('form-login');
console.log(loginForm.getValues());

当面は回避策var email = Ext.getCmp('emailField').getValue();がありますが、将来的にはフォームを適切に参照して、一度に値を取得できるようにしたいと考えています。

私が何をしようとしても、フォームは null として返されます。何かアイデアはありますか? :/

更新: コンソールログ。

var form = Ext.getCmp('loginForm');
console.log(form.getValues());

出力: TypeError: form.getValues は関数ではありません

var form = Ext.getCmp('loginForm');
console.log(form.getForm());

出力: TypeError: form.getForm は関数ではありません

console.log(form);

出力: http://grab.by/yg6C

score 1 · Accepted Answer

まず、コード内の「id」構成をすべて取り除きます。2 番目: '-' をリテラルコネクタ ('form-login') として使用しないでください。代わりに、formLogin または FormLogin または formlogin を使用してください。以下の理由を参照してください。

問題にアプローチする方法は 2 つあります。

オプション 1. ログインウィンドウでカスタムイベントを発生させる

ウィジェット構成設定をウィンドウに追加すると、ウィジェット設定を xtype として使用できるため、xtype 設定を削除できます。

widget: 'LoginFormWindow'

以下をコントローラーに追加します。

refs: [{
   ref: 'LoginFormWindow', // which is the widget
   selector: 'LoginFormWindow'
}...

this.control({
    // Login window
        'LoginFormWindow' : {
             submitform: this.loginAction
        }
    });

ウィンドウ内のボタンを次のように処理します。

 buttons: [{
      text:'Login',
      scope: this, // scope on window
      handler: function() {
         var form = this.down('form');
         this.fireEvent('submitform', form); // form is send with the event
      }
 }]

次に、コントローラーで：

 loginAction: function(form) {

     formData = form.getForm();

     ....


 }

ただし、Ajax ではなく form.submit() を使用することをお勧めします。これは、form.submit がフォームの Ajax 呼び出しの外部で快適な方法であるためです。

オプション 2:

ウィンドウ ref がまだコントローラー内にある状態で、loginAction 関数で次の操作を実行できます。

 var window = this.getLoginFormWindow(); // this getter comes with the ref
 var form = window.down('form');
 ... etc ....

プログラムでは決して「id」を使用しないでください。代わりに「itemId」を使用してください (itemId : 「thisismyitemid」)。なんで？「id」は DOM 内で一意でなければならないためです (HTML の「id」のように)。

「itemId」を使用すると、次のように簡単に使用できます: this.down('#thisismyitemid')。したがって、「itemId」は「this」インスタンス内で一意である必要があります。

score 1 · Accepted Answer

emailField指定しておらず、id と Ext がデフォルトで自動割り当て ID になっているため、をどのように取得しているかわかりませんか? 使ってみましたExt.getCmp('loginForm');か？

http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext-method-getCmp

また、コントローラーでフォームを簡単に取得できる参照http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext.app.Controller-cfg-refsを使用することを強くお勧めします。

javascript - ExtJS 5 で JavaScript がフォームへの参照を取得できない

2 に答える 2

Related

Reference