FC2ブログ

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

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

スポンサーサイト

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

Ext JS-EditorGrid

久しぶりにExt JSを使っています。今回はデータ編集ができるGridをやってみました。

データ

{rows:[
{"book":"今日からつかえるJSP&サーブレット","tanka":"3150","kosu":"","price":""},
{"book":"Tomcatハンドブック第2版","tanka":"4935","kosu":"","price":""},
{"book":"jQueryプログラミング入門","tanka":"3150","kosu":"","price":""}
]}


JavaScript

function editorGridDisplay(){
var textEditor = new Ext.form.TextField(); // (1)編集モードに入った時のeditor

var gridData = new Ext.data.Store({
url: 'data/grid.json'
,reader: new Ext.data.JsonReader({
root: 'rows'
,id: 'id'
},[{name: 'book'},{name: 'tanka'},{name: 'kosu'},{name: 'price'}]
)
});
gridData.load();

var westView = {region: 'west', width: 150 ,xtype: 'panel' ,title: 'メニュー'};
var centerView = {region: 'center' ,title: '一覧表'
,xtype: 'editorgrid' // (2)editorGridを指定
,store: gridData
,clicksToEdit: 1 // (3)編集モードに入るためのクリック数
,columns: [ // (4)rendererとeditorの指定
{header: '書籍名', width: 250, dataIndex: 'book'}
,{header: '単価', width: 80, dataIndex: 'tanka', align: 'right'
, renderer: addComma }
,{header: '個数', width: 80, dataIndex: 'kosu', align: 'right'
, renderer: addComma, editor: textEditor }
,{header: '価格', width: 80, dataIndex: 'price', align: 'right'
, renderer: addComma }
]
,columnLines: true // (5)縦のグリッド線を描く
,stripeRows: true // (6)1行毎に色を変える
,listeners: { // (7)aftereditリスナで、セルの数値をgetして計算。
// 計算結果をセルに書き込む。

afteredit: function(e) {
var tanka, kosu, price;
if (e.column == 2) {
tanka = e.record.data["tanka"];
kosu = e.record.data["kosu"];
if (isNaN(tanka) || isNaN(kosu)) price = "";
else price = Number(tanka) * Number(kosu);
e.record.data["price"] = String(price);
e.record.commit();
}
}
}
};
var viewport = new Ext.Viewport({
layout: 'border'
,items: [westView, centerView]
,renderTo: Ext.getBody()
});
};
// (8)rendererで呼ばれる中身
function addComma(value, p, record) {
// 元々付いているカンマを外す
var num = new String(value).replace(/,/g, "");
if (isNaN(num)) {
return value;
} else {
// 数値データなら、3桁区切りにする
while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
return num;
}
}


実行直後


データ入力中


個数を入力すると、単価と掛け合わせて価格を表示するというものです。

要となる部分を説明します。

(1)編集モードに入った時のeditorを指定します。これは(4)で使います。
(2)xtype:'editorgrid'を指定すると、編集可能なGridになります。通常のGrid(編集不可のもの)ではxtype:'grid'。
(3)clicksToEdit:1を指定すると、シングルクリックで編集モードに入ります。デフォルトは2(ダブルクリック)。
(4)rendererは通常のGridでも使えます。データを加工して表示させる時に使います。ここでは数値を3桁カンマ区切りで表示します。3桁カンマ区切り処理は(8)で指定しています。
(5)縦のグリッド線を描きます。デフォルトでは描画されません。通常のGridでも使えます。
(6)1行ごとに色を変えます。通常のGridでも使えます。
(7)aftereditはデータ編集後に処理されるリスナ。ここで単価と個数を掛け算して価格にします。
(8)rendererで呼ばれる関数。

viewportも使っているので、コードが複雑になっています。
スポンサーサイト

コメント

コメントの投稿

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

トラックバック

トラックバックURL:http://sookibizviz.blog81.fc2.com/tb.php/379-303c4d52

■  カレンダー

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