Ext JSでExt.Updaterを使用する

2017/04/04

★過去の記事

第1回

第2回

第3回

今回は、要素の内容を更新することが出来るExt.Updaterの使い方を説明します。

★はじめに

Ext.Updaterオブジェクトを取得する方法は2つあります。

★方法1：直接作成する

newで直接インスタンス化する方法です。

Updater( Mixed el, [Boolean forceNew] )

el・・・更新を行う要素です。id等で指定します。
forceNew・・・オプションです。デフォルトでは、elで指定された要素に既にアップデータが存在する場合、同じアップデータが返されます。しかし、この値をtrueに指定した場合は、アップデータが存在するかチェックされません。結果、必ず新しいアップデータが作成され返されることになります。

Ext.onReady(function()
{
    //直接作成
    var updater = new Ext.Updater("footer");
    ・・・
});

★方法2：Ext.Element.getUpdaterメソッドを使う

Ext.ElementにはgetUpdaterという名前のUpdaterを取得するメソッドが用意されています。

まだ説明していませんでしたが、Ext.ElementはDOM要素をカプセル化しているExtのクラスです。

DOMの機能に加えて、Extで使われる様々な機能が実装されています。

下のようにExt.get("＜id＞")とすることで指定したidの要素をカプセル化したExt.Elementクラスを取得することが出来ます。

Ext.onReady(function()
{
    // Ext.Element.getUpdaterメソッドを使う
    var updater = Ext.get("footer").getUpdater();
    ・・・
});

★更新の実行

更新の方法は幾つかありますが、最も基本的なのはupdateメソッドを使う方法です。

updateメソッドにはパラメータを格納したオブジェクトを渡します。

パラメータは次のようなものがあります。

url・・・更新する要素に入れるコンテンツを返すURLを指定します。URLを表す文字列またはURLを表す文字列を返す関数への参照です。
method・・・GETかPOSTです。デフォルトは、パラメータが渡された場合POSTでそれ以外はGETです。
params・・・パラメータです。URLエンコードされた文字列か、パラメータのコレクションを表すオブジェクトか、オブジェクトを返す関数への参照です。
script・・・返ってきたテキストにscpiptタグがある場合実行します。スクリプトが実行された後に、コールバック関数が呼ばれます。
callback・・・コールバック関数です。
scope・・・コールバック関数が実行されるスコープです。
discardUrl・・・通常はupdateメソッドで指定したurlがデフォルトのurlになり、refreshメソッドで再読み込みする場合に使われますが、この動作を回避する為にtrueにします。
timeout・・・タイムアウト値です。
text・・・更新途中に表示されるテキストです。
nochche・・・よく分かりません（原文：Only needed for GET requests, this option causes an extra, auto-generated parameter to be appended to the request to defeat caching (defaults to Ext.Updater.defaults.disableCaching).）。

使用例：

Ext.onReady(function()
{
    var updater = Ext.get("footer").getUpdater();
    updater.update(
    {
        url: "all.txt",
        callback: updated,
        text: "読み込み中...",
        timeout: 60
    });
});

function updated()
{
    Ext.MessageBox.show(
    {
        title: "確認",
        msg: "読み込みが完了しました。",
        width: 400,
        buttons: Ext.MessageBox.OK
    });
}

all.txtは次のような1行だけのテキストファイルです。

<b>copyright (C) 2008 Piz&Yumina All rights reserved.</b>

実行結果は↓のようになります。

フッターが「読み込み中...」と表示されています。

読み込みが完了するとフッターが更新されメッセージボックスが表示されます。

★補足1：ショートカットについて

上記例のようにupdateだけを使う時は、Updaterを作らずにExt.Element.loadメソッドを使うことも出来ます。

Ext.onReady(function()
{
    var updater = Ext.get("footer").load(
    {
        url: "all.txt",
        callback: updated,
        text: "読み込み中...",
        timeout: 60
    });
});

function updated()
{
    Ext.MessageBox.show(
    {
        title: "確認",
        msg: "読み込みが完了しました。",
        width: 400,
        buttons: Ext.MessageBox.OK
    });
}

★補足2：パネルにコンテンツを流し込む

パネルの内容を別ページから取得して表示することも出来ます。

autoLoadコンフィグにExt.Updater.updateメソッドに指定するのと同じオブジェクトを指定するとパネルの表示時に自動的にデータが読み込まれます。

また、autoScrollコンフィグをtrueにすると、表示するコンテンツがオーバーフローした時に自動的にスクロールパーを表示します。

Ext.onReady(function()
{
    var myPanel = new Ext.Panel(
    {
        id: "myPanel",
        title: "狂乱家族日記",
        width: 800,
        height: 320,
        renderTo: "floatmenu",
        autoScroll: true,
        autoLoad:
        {
            url: "kyoran10.txt",
            text: "読み込み中...",
            timeout: 60
        }
    });
});