Sencha Ext JS 4 – Ext Directの通信エラーハンドリング | Sencha Advent Calendar 2013 – 9日目

この記事は、 Sencha Advent Calendar 2013 の9日目の記事です。

さて、いままでSencha Touchについて書いてきましたが、1回くらいはSencha Ext JSのネタを入れたいなぁと思います。

今日は、Ext Directにおける通信エラーハンドリングについてです。

Ext Directと題していますが、ここでお話するのは、Ext.form.Panelクラス(フォームパネル)のsubmit時処理についてです。

通信エラーハンドラ、failure

人の書いたコードを見ていると、Ext.form.Panel.submitを呼び出した時のコードが、次のようになっていることがあります。

var f = Ext.create("Ext.form.Panel"); // f はフォームパネルコンポーネントオブジェクト

f.submit({
    success: function() {
        // 処理
    }
});

var f = Ext.create("Ext.form.Panel"); // f はフォームパネルコンポーネントオブジェクト

f.submit({

success: function() {

// 処理

}

});

「おい、failureどこ行った？」

と思うと、次のようなコードもあります。

f.submit({
    success: function() {
        // 処理
    },
    failure: function() {
    }
});

f.submit({

success: function() {

// 処理

failure: function() {

}

});

「・・・。」

そんなに、failure嫌いですかね（笑）

まぁ、正直「書くことがない」っていう回答が多いようですが、本当にそうでしょうか。

APIドキュメンテーションをみてみましょう。

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.Basic

もう、僕が何かを語る必要もない気がしますが…

myFormPanel.getForm().submit({
    clientValidation: true,
    url: 'updateConsignment.php',
    params: {
        newStatus: 'delivered'
    },
    success: function(form, action) {
       Ext.Msg.alert('Success', action.result.msg);
    },
    failure: function(form, action) {
        switch (action.failureType) {
            case Ext.form.action.Action.CLIENT_INVALID:
                 Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
                 break;
            case Ext.form.action.Action.CONNECT_FAILURE:
                Ext.Msg.alert('Failure', 'Ajax communication failed');
                break;
            case Ext.form.action.Action.SERVER_INVALID:
               Ext.Msg.alert('Failure', action.result.msg);
        }
    }
});

myFormPanel.getForm().submit({

clientValidation: true,

url: 'updateConsignment.php',

params: {

newStatus: 'delivered'

success: function(form, action) {

Ext.Msg.alert('Success', action.result.msg);

failure: function(form, action) {

switch (action.failureType) {

case Ext.form.action.Action.CLIENT_INVALID:

Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');

break;

case Ext.form.action.Action.CONNECT_FAILURE:

Ext.Msg.alert('Failure', 'Ajax communication failed');

break;

case Ext.form.action.Action.SERVER_INVALID:

Ext.Msg.alert('Failure', action.result.msg);

}

});

failureに設定した、コールバック関数の引数には、第二引数にactionオブジェクトが渡されます。そのプロパティであるfailureTypeを判定しましょう。

Ext.form.action.Action.CLIENT_INVALID
Ext.form.action.Action.CONNECT_FAILURE
Ext.form.action.Action.SERVER_INVALID

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.action.Action-static-property-CLIENT_INVALID

が返された場合、それぞれ何が原因でエラーが起きているのかを特定することができます。

以上ですwww

まとめ

やっぱり、「failure後で書こう」と思って、そのままリリースしたり、特に書くことがないと放置したりしているソースをみていると、最低限上記のような対応を記述しておいた方がいいかもしれません。

プロジェクトでやるなら、Formクラスを継承した抽象クラスを作成して、エラー処理を実装させ、共通化します。

p.load({
    success: function(form, ret) {
    },
    failure: Ext.Function.pass(p.failureFn, [p])
});

p.load({

success: function(form, ret) {

failure: Ext.Function.pass(p.failureFn, [p])

});

failureFnが抽象クラスで定義されているメソッドです。任意の引数を与えたい場合は、上記のように、Ext.Function.passを利用しましょう。

これで、今日から、放置気味なfailureとも、お別れです。

是非、活用してください。

Sencha Ext JS 4 – Ext Directの通信エラーハンドリング | Sencha Advent Calendar 2013 – 9日目

Sencha Ext JS 4 – Ext Directの通信エラーハンドリング | Sencha Advent Calendar 2013 – 9日目

通信エラーハンドラ、failure

まとめ

2 thoughts on “Sencha Ext JS 4 – Ext Directの通信エラーハンドリング | Sencha Advent Calendar 2013 – 9日目”

カテゴリー