FC2ブログ

サラリーマンのすらすらIT日記

IT関連を中心とした日々を綴ります。
--/--/--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2011/07/27

Ext JS 4-Gridを作ってみました

今度はExt JS 4.0でGridを作ってみました。前回同様オンラインドキュメントのサンプルをそのまま打ち込んだだけです。


Ext.BLANK_IMAGE_URL = "../ext-4.0.2a/resources/themes/images/default/tree/s.gif";
Ext.require([
'Ext.data.*'
,'Ext.grid.*'
]);
Ext.onReady(function(){
Ext.define('User', {
extend: 'Ext.data.Model'
,fields: ['name', 'email', 'phone']
});
var userStore = Ext.create('Ext.data.Store', {
model: 'User'
,data: [
{name: 'Lisa', email: 'lisa@simpson.com', phone: '555-111-1224'}
,{name: 'Bart', email: 'bart@simpson.com', phone: '555-222-1234'}
,{name: 'Homer', email: 'homer@simpson.com', phone: '555-222-1244'}
,{name: 'Marge', email: 'marge@simpson.com', phone: '555-222-1254'}
]
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody()
,store: userStore
,width: 400
,height: 200
,columns: [
{
text: 'Name'
,width: 100
,sortable: false
,hideable: false
,dataIndex: 'name'
}
,{
text: 'Email Address'
,width: 150
,dataIndex: 'email'
,hidden: false
}
,{
text: 'Phone Number'
,flex: 1
,dataIndex: 'phone'
}
]
});
});




これで終わるのもなんなので、少し説明しておきます。

7行目のExt.defineとentendコンフィグは、Ext JS 4で出てきた記法で、従来だと

Ext.ux.Model = Ext.entend(Ext.data.Model, {
// いろんな設定
});
var User = new Ext.ux.Model({
// いろんな設定
});

と書いていたものです。どこかのサイトに書いてあったのですが(URLは失念)、上記のnewする記法だとnewするのに失敗した場合、JavaScriptエラーになる、Ext JS 4による記法はそのエラーを起こさないためとのことでした。

11行目のExt.createも同様で、従来だと

var userStore = new Ext.data.Store({
// いろんな設定
});

と書いていたもの。Ext JS 4ではfields定義をmodelに持ってきて、storeと分離させています。

20行目も同様。従来記法は、

new Ext.grid.GridPanel({
// いろんな設定
});

です。Ext.grid.GridPanelがExt.grid.Panelになっている点に注意。gridという語の繰り返しは不要というわけですか。

こうやって見ていくと、Ext JS 3より見通しのよいプログラムになりそうです。

追って紹介しますが、gridの下部につけるpagingToolbarも作りやすくなっています。

スポンサーサイト

コメント

コメントの投稿

  • URL
  • コメント
  • パスワード
  • 秘密
  • 管理者にだけ表示を許可する

トラックバック

トラックバックURL:http://sookibizviz.blog81.fc2.com/tb.php/903-6ea3a089

■  カレンダー

06 | 2019/07 | 08
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -

■  プロフィール

sookibizviz

Author:sookibizviz
仕事の内容やソフトの紹介を交えながら、日々の悪戦苦闘を綴っていきます。

■  最新記事

■  最新コメント

■  最新トラックバック

■  月別アーカイブ

■  カテゴリ

未分類 (64)
BizViz (24)
IT (1119)
計量 (76)
環境 (26)
数学 (181)
ニュース (46)
本 (187)
音楽 (113)
囲碁 (5)
将棋 (26)
ブログ (14)
日記 (19)

■  FC2カウンター

■  検索フォーム

■  RSSリンクの表示

■  QRコード

QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。