FC2ブログ

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

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

スポンサーサイト

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

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

昨日の続きで、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']
});
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore'
,model: 'User'
,data: {'items': [
{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'}
]}
,proxy: {
type: 'memory'
,reader: {
type: 'json'
,root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody()
,selType: 'cellmodel'
,plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]
,store: Ext.data.StoreManager.lookup('simpsonsStore')
,width: 400
,height: 200
,columns: [
{
header: 'Name'
,width: 100
,sortable: false
,hideable: false
,dataIndex: 'name'
,field: 'textfield'
}
,{
header: 'Email Address'
,width: 150
,dataIndex: 'email'
,hidden: false
,field: {
xtype: 'textfield'
,allowBlank: false
}
}
,{
header: 'Phone Number'
,flex: 1
,dataIndex: 'phone'
}
]
});
});


これは編集可能なGridです。その前に説明をしておきます。

12行目のstoreIdの記述。11行目の箇所を

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

として、36行目を

,store: simpsonsStore

と書くのはExt JS 3のやり方。またしてもExt JS 4特有の書き方です。

30行目以降の書き方が、Ext JS 4による編集可能Grid。

,selType: 'cellmodel'
,plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]

Ext JS 3の時のように、Ext.grid.EditorGridと別のクラスを指定しなくてもよいのは、非常に書きやすい。編集不可なGridを、途中で編集可能なGridに変えたい時などに便利です。

これを実行して得られるGridは次のようなもの。



参考にしたサイトの「Editing」に示されたGridとは違います。これはドキュメントの間違いでしょう。このようにするには、「Row Editing」に書かれた下記のコードを書きます。

,selType: 'rowmodel'
,plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
]



データを編集して「update」ボタンをクリックすると、次のようになります。


赤い三角マークがつきます。dirtyなデータということですが、これをクリアするには、Ext.grid.plugin.RowEditingのところに、次のように書き足せばOK。

Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
,listeners: {
edit: function(e) {
e.record.commit();
}
}
})


スポンサーサイト

コメント

コメントの投稿

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

トラックバック

トラックバックURL:http://sookibizviz.blog81.fc2.com/tb.php/904-aae998d7

■  カレンダー

04 | 2019/05 | 06
- - - 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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。