Technology
テクノロジー
EXTJS ビューポートを使ってみる
■はじめに
今までのコラムでは、単体で利用可能なウィジェットを紹介してきましたが、今回は複数のウィジェットを同時に使っていきたいと思います。
今回のコラムでは、ビューポートクラスをご紹介させて頂きます。このクラスを使うと、エクスプローラーチックな、左ペインにツリービューを、右ペインにグリッドなどを使った一覧を表示させ、スライダーで両者の表示幅を変更するなどといったことが可能となります。
■ビューポートクラス
ビューポートクラスは、それ自体が何らかのウィジェットとして表示されるというより、複数のウィジェット用に表示領域を区切り、同時に表示させるための縁の下のクラスとなります。よって、このクラス単体で使用するケースはほとんどないかと思います。
EXTJSでは、ビューポートクラスを、
Ext.Viewport
として定義していますので、これをインスタンス化して利用することにより、以下のような画面を表示することが可能となります。
■簡単な例
早速、コードを見ていきたいと思います。
以下のサンプルコードは、先ほどのキャプチャイメージと同じ画面を実現するものとなります。
ソースコードはHTMLファイルとJavaScriptファイルからなり、全部で3ファイルとなります。
―――――――――――――――HTMLコード―――――――――――――――
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ビューポートクラスサンプル</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="./UserTreePanel_10_1.js"></script>
<script type="text/javascript" src="./UserGridPanel_10_1.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
Ext.onReady( function()
{
var v = new Ext.Viewport(
{
layout: 'border',
items: [
new Ext.ux.UserTreePanel({
region: 'west'
}),
new Ext.ux.UserGridPanel({
region: 'center'
})
]
} );
} );
</script>
</head>
<body>
</body>
</html>
――――――――――――――――――――――――――――――――
―――――――――――――――JavaScriptコード―――――――――――――――
Ext.namespace( 'Ext.ux.UserTreePanel' );
Ext.ux.UserTreePanel = Ext.extend( Ext.tree.TreePanel,
{
title: 'ツリーパネルクラス-サンプル',
split: true,
//*****************************************************************
//initComponentのオーバーライド
//*****************************************************************
initComponent: function()
{
//
//ノードを作成して、それをルートノードとして設定する。
//
this.root = new Ext.tree.TreeNode( {
text: 'Ext JS',
draggable: false,
id: 'root',
expanded: true
} );
//
//forによる繰り返し処理を行い、ルートノードに子ノードをリーフと
//して追加していく。
//
for( var i = 1; i <= 3; i++ ){
this.root.appendChild( {
id: 'child' + i,
text: 'Children node ' + i,
leaf: true
} );
}
//
//親クラスのinitComponentを呼び出す
//
Ext.ux.UserTreePanel.superclass.initComponent.call( this );
}
} );
――――――――――――――――――――――――――――――――
―――――――――――――――JavaScriptコード―――――――――――――――
var testData = [
['user01', '市山', '肇', 32, '1977-01-01'],
['user02', '双葉', '次郎', 36, '1973-02-02'],
['user03', '狭山', '光江', 49, '1960-03-03'],
['user04', '司馬', '静子', 23, '1986-04-04'],
['user05', '五味', '吾郎', 25, '1984-05-05'],
['user06', '六場', '睦', 38, '1971-06-06'],
['user07', '名鳥', '菜波', 23, '1986-07-07'],
['user08', '八重', '靖男', 47, '1962-08-08'],
['user09', '久喜', '熊次郎', 49, '1960-09-09'],
['user10', '戸塚', '俊夫', 18, '1991-10-10'],
['user11', '一場', '泉', 32, '1977-01-11'],
['user12', '藤山', '房子', 36, '1973-02-12'],
['user13', '三葉', '早苗', 49, '1960-03-13'],
['user14', '滋賀', '芳之', 23, '1986-04-14'],
['user15', '後藤', '逸美', 25, '1984-05-15'],
['user16', '武藤', '六三郎', 38, '1971-06-16'],
['user17', '名波', '直秀', 23, '1986-07-17'],
['user18', '矢島', '弥生', 47, '1962-08-18'],
['user19', '熊田', '久太郎', 49, '1960-09-19'],
['user20', '豊橋', '利美', 18, '1991-10-20']
];
Ext.namespace( 'Ext.ux.UserGridPanel' );
Ext.ux.UserGridPanel = Ext.extend( Ext.grid.GridPanel,
{
title: 'グリッドパネルクラス-サンプル',
stripeRows: true,
autoExpandColumn: 'birthday',
loadMask: {
msg: '読み込み中。しばらくお待ちください...'
},
columns: [
{id: 'userId', header: 'ユーザID', width: 70, sortable: true, dataIndex: 'userId'},
{id: 'userName1', header: 'ユーザ名(姓)', width: 160, sortable: true, dataIndex: 'userName1'},
{id: 'userName2', header: 'ユーザ名(名)', width: 160, sortable: true, dataIndex: 'userName2'},
{id: 'age', header: '年齢', width: 50, sortable: true, dataIndex: 'age'},
{id: 'birthday', header: '誕生日', width: 100, sortable: true, dataIndex: 'birthday', renderer: Ext.util.Format.dateRenderer('Y年m月d日')}
],
/* このクラス用に独自に用意したプロパティ */
dataFields: [
{name: 'userId', type: 'string'},
{name: 'userName1', type: 'string'},
{name: 'userName2', type: 'string'},
{name: 'age', type: 'int' },
{name: 'birthday', type: 'date', dateFormat: 'Y-m-d'}
],
//*****************************************************************
//initComponentのオーバーライド
//*****************************************************************
initComponent: function()
{
//
//storeクラスを構築
//
this.store = this.createStore();
//
//親クラスのinitComponentを呼び出す
//
Ext.ux.UserGridPanel.superclass.initComponent.call( this );
},
//*****************************************************************
//Storeを構築するための独自メソッド
//*****************************************************************
createStore: function()
{
//
//データストアの構築
//
return new Ext.data.ArrayStore( {
fields : [
{name: 'userId', type: 'string'},
{name: 'userName1', type: 'string'},
{name: 'userName2', type: 'string'},
{name: 'age', type: 'int' },
{name: 'birthday', type: 'date', dateFormat: 'Y-m-d'}
],
data: testData
} );
}
} );
――――――――――――――――――――――――――――――――
まず、HTMLファイル中のExt.onReady()内を見てください。
ビューポートクラスに対するレイアウト指定に関しては、layoutパラメータにて「border」レイアウトにしています。よって、ビューポートクラスの各アイテムは、regionパラメータにて配置を指定することになります。
borderレイアウトの場合、配置指定は方角で行います。各方角と配置される箇所は以下のようになります。
なお、borderレイアウトの場合、必ずregionパラメータが「center」である要素が必ず必要となる点をご注意ください（エラーとなります）。よって、今回の場合、ツリーパネルを左側に、右側（正確には中央に）グリッドパネルが配置されるような指定を各々のウィジェットに指定します。
左側に配置されるツリーパネルですが、外部のJavaScriptファイルにしてあります。ここで注意していただきたい点は、
と書かれている部分となります。この１行を書いておくだけで、ツリーパネルとグリッドパネルの間でスライダーが使用できるようになり、表示領域をマウスで変化させることができるようになります。
如何でしょうか？クラスを継承してツリーパネルやグリッドパネルなどを作成しているのであれば、比較的簡単な手間で、このような画面を作成することができるようになります。実際、今回のサンプルを作成するにあたり、過去のコラムで掲載させて頂きましたサンプルコードを流用しています。
■ステートを使ってCookieに配置位置を保存する
EXTJSでは、配置の状態などをCookieなどに保持しておくことが可能です。この機能により、前回閲覧時の配置の状態を保存しておき、次回閲覧時にその状態で復帰させることができます。
ステート機能を使うには、Ext.state.Managerクラスを使用します。実際例として、今までのサンプルを変更して対応させていきます。
まず、ステート情報を保持するための初期化処理のため、htmlファイルに以下のようなコードを追加します。
上記のようにExt.state.ManagerにsetProvider()メソッドを使ってCookieProviderクラスのインスタンスを設定します。CookieProviderクラスはその名の通り、Cookieにステート情報を保持するためのクラスです。現時点でEXTJSにて用意されているのは、このCookieProviderクラスのみですが、Ext.state.Providerクラスを継承することで、ステート情報を保持するクラスを任意に作成することもできます。
次に、各クラスのステート情報が保持されるよう、各クラス（というかインスタンス化したオブジェクト）に、idを設定してきます。先ほど修正したhtmlファイルを以下のように修正します。
EXTJSのステート機能は、各オブジェクトに付けられたIDの値をキーとして保持されます。
このため、インスタンス化されたオブジェクトに固定的なIDが設定されていないとステート情報が正常に保持されません。
さて、ここまで修正したところで、再度、ブラウザを起動してこのHTMLファイルを読み込みます。
ツリーパネルとグリッドパネル間の幅を変更したり、グリッドパネルの列を移動させてみてください。その後、一度ブラウザを閉じ、再度同じHTMLを読み込んでみてください。先ほどまで操作した状態で画面が復帰しているかと思います。
■最後に
さて如何でしたでしょうか。10回に渡りEXTJSのご紹介をさせて頂きました。EXTJSでは、JavaScriptがちょっと分かる方であれば、またjQueryなどを使ったことがある方であれば、比較的簡単なコードで、リッチな画面が作成できることが分かっていただけたのではないかと思います。
今後、Webの世界では、このようにリッチでかつ操作性を求められるアプリケーションが主流になってくるかと思います。その際、今回の記事が少しでも皆様のお役に立てば幸いです。
今までのコラムでは、単体で利用可能なウィジェットを紹介してきましたが、今回は複数のウィジェットを同時に使っていきたいと思います。
今回のコラムでは、ビューポートクラスをご紹介させて頂きます。このクラスを使うと、エクスプローラーチックな、左ペインにツリービューを、右ペインにグリッドなどを使った一覧を表示させ、スライダーで両者の表示幅を変更するなどといったことが可能となります。
■ビューポートクラス
ビューポートクラスは、それ自体が何らかのウィジェットとして表示されるというより、複数のウィジェット用に表示領域を区切り、同時に表示させるための縁の下のクラスとなります。よって、このクラス単体で使用するケースはほとんどないかと思います。
EXTJSでは、ビューポートクラスを、
Ext.Viewport
として定義していますので、これをインスタンス化して利用することにより、以下のような画面を表示することが可能となります。
 |
| EXTJSビューポート1 *クリックして拡大 |
早速、コードを見ていきたいと思います。
以下のサンプルコードは、先ほどのキャプチャイメージと同じ画面を実現するものとなります。
ソースコードはHTMLファイルとJavaScriptファイルからなり、全部で3ファイルとなります。
―――――――――――――――HTMLコード―――――――――――――――
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ビューポートクラスサンプル</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="./UserTreePanel_10_1.js"></script>
<script type="text/javascript" src="./UserGridPanel_10_1.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
Ext.onReady( function()
{
var v = new Ext.Viewport(
{
layout: 'border',
items: [
new Ext.ux.UserTreePanel({
region: 'west'
}),
new Ext.ux.UserGridPanel({
region: 'center'
})
]
} );
} );
</script>
</head>
<body>
</body>
</html>
――――――――――――――――――――――――――――――――
―――――――――――――――JavaScriptコード―――――――――――――――
Ext.namespace( 'Ext.ux.UserTreePanel' );
Ext.ux.UserTreePanel = Ext.extend( Ext.tree.TreePanel,
{
title: 'ツリーパネルクラス-サンプル',
split: true,
//*****************************************************************
//initComponentのオーバーライド
//*****************************************************************
initComponent: function()
{
//
//ノードを作成して、それをルートノードとして設定する。
//
this.root = new Ext.tree.TreeNode( {
text: 'Ext JS',
draggable: false,
id: 'root',
expanded: true
} );
//
//forによる繰り返し処理を行い、ルートノードに子ノードをリーフと
//して追加していく。
//
for( var i = 1; i <= 3; i++ ){
this.root.appendChild( {
id: 'child' + i,
text: 'Children node ' + i,
leaf: true
} );
}
//
//親クラスのinitComponentを呼び出す
//
Ext.ux.UserTreePanel.superclass.initComponent.call( this );
}
} );
――――――――――――――――――――――――――――――――
―――――――――――――――JavaScriptコード―――――――――――――――
var testData = [
['user01', '市山', '肇', 32, '1977-01-01'],
['user02', '双葉', '次郎', 36, '1973-02-02'],
['user03', '狭山', '光江', 49, '1960-03-03'],
['user04', '司馬', '静子', 23, '1986-04-04'],
['user05', '五味', '吾郎', 25, '1984-05-05'],
['user06', '六場', '睦', 38, '1971-06-06'],
['user07', '名鳥', '菜波', 23, '1986-07-07'],
['user08', '八重', '靖男', 47, '1962-08-08'],
['user09', '久喜', '熊次郎', 49, '1960-09-09'],
['user10', '戸塚', '俊夫', 18, '1991-10-10'],
['user11', '一場', '泉', 32, '1977-01-11'],
['user12', '藤山', '房子', 36, '1973-02-12'],
['user13', '三葉', '早苗', 49, '1960-03-13'],
['user14', '滋賀', '芳之', 23, '1986-04-14'],
['user15', '後藤', '逸美', 25, '1984-05-15'],
['user16', '武藤', '六三郎', 38, '1971-06-16'],
['user17', '名波', '直秀', 23, '1986-07-17'],
['user18', '矢島', '弥生', 47, '1962-08-18'],
['user19', '熊田', '久太郎', 49, '1960-09-19'],
['user20', '豊橋', '利美', 18, '1991-10-20']
];
Ext.namespace( 'Ext.ux.UserGridPanel' );
Ext.ux.UserGridPanel = Ext.extend( Ext.grid.GridPanel,
{
title: 'グリッドパネルクラス-サンプル',
stripeRows: true,
autoExpandColumn: 'birthday',
loadMask: {
msg: '読み込み中。しばらくお待ちください...'
},
columns: [
{id: 'userId', header: 'ユーザID', width: 70, sortable: true, dataIndex: 'userId'},
{id: 'userName1', header: 'ユーザ名(姓)', width: 160, sortable: true, dataIndex: 'userName1'},
{id: 'userName2', header: 'ユーザ名(名)', width: 160, sortable: true, dataIndex: 'userName2'},
{id: 'age', header: '年齢', width: 50, sortable: true, dataIndex: 'age'},
{id: 'birthday', header: '誕生日', width: 100, sortable: true, dataIndex: 'birthday', renderer: Ext.util.Format.dateRenderer('Y年m月d日')}
],
/* このクラス用に独自に用意したプロパティ */
dataFields: [
{name: 'userId', type: 'string'},
{name: 'userName1', type: 'string'},
{name: 'userName2', type: 'string'},
{name: 'age', type: 'int' },
{name: 'birthday', type: 'date', dateFormat: 'Y-m-d'}
],
//*****************************************************************
//initComponentのオーバーライド
//*****************************************************************
initComponent: function()
{
//
//storeクラスを構築
//
this.store = this.createStore();
//
//親クラスのinitComponentを呼び出す
//
Ext.ux.UserGridPanel.superclass.initComponent.call( this );
},
//*****************************************************************
//Storeを構築するための独自メソッド
//*****************************************************************
createStore: function()
{
//
//データストアの構築
//
return new Ext.data.ArrayStore( {
fields : [
{name: 'userId', type: 'string'},
{name: 'userName1', type: 'string'},
{name: 'userName2', type: 'string'},
{name: 'age', type: 'int' },
{name: 'birthday', type: 'date', dateFormat: 'Y-m-d'}
],
data: testData
} );
}
} );
――――――――――――――――――――――――――――――――
まず、HTMLファイル中のExt.onReady()内を見てください。
|
var v = new Ext.Viewport(
{
layout: 'border',
items: [
new Ext.ux.UserTreePanel({
region: 'west'
}),
new Ext.ux.UserGridPanel({
region: 'center'
})
]
} );
|
ビューポートクラスに対するレイアウト指定に関しては、layoutパラメータにて「border」レイアウトにしています。よって、ビューポートクラスの各アイテムは、regionパラメータにて配置を指定することになります。
borderレイアウトの場合、配置指定は方角で行います。各方角と配置される箇所は以下のようになります。
 |
| EXTJSビューポート1 |
左側に配置されるツリーパネルですが、外部のJavaScriptファイルにしてあります。ここで注意していただきたい点は、
|
split: true,
|
と書かれている部分となります。この１行を書いておくだけで、ツリーパネルとグリッドパネルの間でスライダーが使用できるようになり、表示領域をマウスで変化させることができるようになります。
如何でしょうか？クラスを継承してツリーパネルやグリッドパネルなどを作成しているのであれば、比較的簡単な手間で、このような画面を作成することができるようになります。実際、今回のサンプルを作成するにあたり、過去のコラムで掲載させて頂きましたサンプルコードを流用しています。
■ステートを使ってCookieに配置位置を保存する
EXTJSでは、配置の状態などをCookieなどに保持しておくことが可能です。この機能により、前回閲覧時の配置の状態を保存しておき、次回閲覧時にその状態で復帰させることができます。
ステート機能を使うには、Ext.state.Managerクラスを使用します。実際例として、今までのサンプルを変更して対応させていきます。
まず、ステート情報を保持するための初期化処理のため、htmlファイルに以下のようなコードを追加します。
|
Ext.onReady( function()
{
//*****追加コード*****
Ext.state.Manager.setProvider( new Ext.state.CookieProvider( {
expires: new Date(new Date().getTime() + (1000 * 60 * 60 * 24 * 7)) //7日
} ) );
//*****ここまで*****
var v = new Ext.Viewport(
{
|
上記のようにExt.state.ManagerにsetProvider()メソッドを使ってCookieProviderクラスのインスタンスを設定します。CookieProviderクラスはその名の通り、Cookieにステート情報を保持するためのクラスです。現時点でEXTJSにて用意されているのは、このCookieProviderクラスのみですが、Ext.state.Providerクラスを継承することで、ステート情報を保持するクラスを任意に作成することもできます。
次に、各クラスのステート情報が保持されるよう、各クラス（というかインスタンス化したオブジェクト）に、idを設定してきます。先ほど修正したhtmlファイルを以下のように修正します。
|
var v = new Ext.Viewport(
{
id: 'viewport', →この部分を追加
layout: 'border',
items: [
new Ext.ux.UserTreePanel({
id: 'userTree', →この部分を追加
region: 'west'
}),
new Ext.ux.UserGridPanel({
id: 'userGrid', →この部分を追加
region: 'center'
})
]
} );
|
EXTJSのステート機能は、各オブジェクトに付けられたIDの値をキーとして保持されます。
このため、インスタンス化されたオブジェクトに固定的なIDが設定されていないとステート情報が正常に保持されません。
さて、ここまで修正したところで、再度、ブラウザを起動してこのHTMLファイルを読み込みます。
ツリーパネルとグリッドパネル間の幅を変更したり、グリッドパネルの列を移動させてみてください。その後、一度ブラウザを閉じ、再度同じHTMLを読み込んでみてください。先ほどまで操作した状態で画面が復帰しているかと思います。
■最後に
さて如何でしたでしょうか。10回に渡りEXTJSのご紹介をさせて頂きました。EXTJSでは、JavaScriptがちょっと分かる方であれば、またjQueryなどを使ったことがある方であれば、比較的簡単なコードで、リッチな画面が作成できることが分かっていただけたのではないかと思います。
今後、Webの世界では、このようにリッチでかつ操作性を求められるアプリケーションが主流になってくるかと思います。その際、今回の記事が少しでも皆様のお役に立てば幸いです。
記事提供：株式会社環
New Topics
Special Ad
| ウマいもの情報てんこ盛り「えん食べ」 | |
 |
「えん食べ」は、エンジョイして食べる、エンターテイメントとして食べものを楽しむための、ニュース、コラム、レシピ、動画などを提供します。 てんこ盛りをエンジョイするのは こちらから |
Hot Topics
IT Job
今週のIT求人情報
その他 IT求人情報はこちら
Interviews / Specials
Follow japan.internet.com
ネット選挙
Popular
Access Ranking
Partner Sites