Ext JSでExt.Updaterを使用する
★過去の記事
今回は、要素の内容を更新することが出来る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
}
});
});
Panel
にはgetUpdater
メソッドやload
メソッドもありますので、「★更新の実行」「★補足1」で説明したのと同じように使用することが出来ます。
(第4回終)
