2008年4月16日水曜日

【EXT JS】GridPanelにイベントを追加する

GridPanelにTopToolbarとボタンを追加してみる。

Gridでよく使うと思われる、新規、削除、Saveなどのイベントを追加。
しかし、非常に簡単にクライアント側で実装できる。後は、いかにサーバ側と連携をとるかだ。

[DEMO] [CODE]

// GridPanel自体は、前の【EXT JS】XMLデータでGridPanelと同じなので途中は省略

GridPanelTest = function(){

・・・省略・・・

GridPanelTest.superclass.constructor.call(this, {

・・・省略・・・

// TopToolbarを追加する
// まずは、Add、Delete、AllDelete、再読み込みのボタンを追加する

tbar: [{
text:'Add',
iconCls:'icon-add',
tooltip:{title:'新規に追加します。'},
handler:this.addItem,
scope:this
},'-',{
text:'Delete',
iconCls:'icon-delete',
tooltip:{title:'行を削除します。'},
handler:this.removeItem,
scope:this
},'-',{
text:'All Delete',
iconCls:'icon-delete-all',
tooltip:{title:'全ての行を削除します。'},
handler:this.removeAll,
scope:this
},'-',{
text:'再読み込み',
iconCls:'icon-load',
tooltip:{title:'表を再読み込みします。'},
handler:this.reloadItems,
scope:this
}],

// これは、ダミーです。ただ単にメッセージが表示されるだけ。
// 更新されたデータをどうやってサーバ側に通知するか、次の学習目標です。
buttons:[{
text:'Save',
handler:function(){
Ext.MessageBox.confirm('Confirm','Saveを実行してもよろしいですか')
}
}]
});
}

// 拡張部分にPanelに定義したボタンの処理を記述します。

Ext.extend(GridPanelTest, Ext.grid.GridPanel,{

// 表に新規の行を追加します。
// storeのinsert methodを使って表の一番上に追加をしています。
addItem: function(){
var p= new Employee({
id: 100,
name: 'Your Name',
occupation: 'Engineer',
age: 28,
salary: 4000000,
birth: (new Date())
});
this.store.insert(0,p);
},

// アラートメッセージを表示させてから削除処理を実行します。
removeItem: function(){
Ext.MessageBox.confirm('Confirm', '選択した行を削除します。', this.actRemove,this);
},

removeAll: function(){
Ext.MessageBox.confirm('Confirm', '全ての行を削除します。', this.actAllRemove,this);
},


// storeをリロードするだけ。。ちょっと手抜き
reloadItems: function(){
this.store.reload();
},

// 'yes'が選択されたら、storeのremoveを使って選択された行を削除する。
actRemove: function(btn){
if (btn=='yes'){
var s = this.selModel.getSelected();
if(s){
this.store.remove(s);
}else{
Ext.MessageBox.alert('Status', '行が選択されていません。');
}
}
},

// 全て削除するには、storeのremoveAllでOK。
actAllRemove: function(btn){
if (btn=='yes'){
this.store.removeAll();
}
}

});

9 件のコメント:

匿名 さんのコメント...

Hi there to every body, it's myy firstt pay a quick visitt of this weblog; this
website includes awesome and actually fine material in favor
of readers.

Look at my site ... trials frontier hack download - Trialsfrontierhack.com -

匿名 さんのコメント...

Hello all, here every person is sharing such experience, thus it's
nice to read this webpage, and I used to visit this webpage daily.


Feel free to visit my homepage: cheap vintage snapback hats

匿名 さんのコメント...

I wanted to thank you for this very good read!! I absolutely enjoyed every little bit of it.
I have you saved as a favorite to look at new things you post…

Visit my weblog after effects animation text

匿名 さんのコメント...

Thіs permits enhanced accounts associates tо experience pertaining to $.
Cut a lot ߋf sourdough breads tо maƙe your favorite ѕub fοr juѕt a bag a meal.
Applying еach օf the firѕt pile tɦе very first reeting card worked iѕ trսly fаce up, certаinly and the other 6 are generally face-lower.


Also visit my blog - spider solitaire free download

匿名 さんのコメント...

※水曜日は定休日となります為、商品の発送対応等は出来ません。※ご注意
北海道、沖縄、離島はレビューをご記入頂きました場合でも、送料無料になりません商品詳細キャリアauメーカーAPPLE型 番iPhone 5s 64GBカラーゴールド状 態新品未使用品(※初期不良などに関しては、アップルストアにてご対応下さい。) 付属品同梱品全て揃っております。[url=http://www.cellphonesmobax.biz/p-1230-送料無料ネットワーク利用制限-[新品未使用]-au版-iPhone-5s-64GB-ゴ]送料無料ネットワーク利用制限
[新品未使用] au版 iPhone 5s 64GB ゴールド ME340J/A 白ロム Apple アップル[/url]
※水曜日は定休日となります為、商品の発送対応等は出来ません。※ご注意
北海道、沖縄、離島はレビューをご記入頂きました場合でも、送料無料になりません■IS15SH AQUOS PHONE
SL■カシスピンク 未使用品☆大人気スマートフォン☆※お取引に何か要望がございましたら出来る限り対応致します質問下さいませ!▽付属品【同梱品全て有り】▽[url=http://www.cellphonesmobax.biz/p-94-送料無料ロッククリア不要![新品未使用]au-AQUOS-PHONE-SL-IS15SH-]送料無料ロッククリア不要![新品未使用]au AQUOS PHONE SL IS15SH
[カシスピンク]  白ロム [/url] ※水曜日は定休日となります為、商品の発送対応等は出来ません。※ご注意
北海道、沖縄、離島はレビューをご記入頂きました場合でも、送料無料になりません 商品詳細 メーカー APPLE カラー ブラック 状
態 新品未開封品(※ネットワーク利用制限(△)になります。今後、万が一通話規制など発生した場合、弊社の保証は一切ございませんので、ご使用方法などにご理[url=http://www.cellphonesmobax.biz/p-1064-送料無料ネットワーク利用制限-[新品未開封品]即送The-new-ipad-(第4世代]送料無料ネットワーク利用制限 [新品未開封品]即送The new ipad (第4世代) Wi-Fi Cellular 16GB ブラック[MD522J/A] SoftBank版? Retinaディスプレイ
白ロム black アイパッド apple[/url] ※水曜日は定休日となります為、商品の発送対応等は出来ません。※ご注意 北海道、沖縄、離島はレビューをご記入頂きました場合でも、送料無料になりません キャリア docomo メーカー Panasonic 型 番 P-01D カラー グリーン
  状 態 新品未使用(※ドコモプレミアクラブにご加入すれば、初期不良によるメーカー保証期間が、通常1年から3年間に延長されます。)   付[url=http://www.cellphonesmobax.biz/p-67-送料無料[新品未使用]-P-01D-docomo-with-series-(グリーン)-本]送料無料[新品未使用] P-01D docomo with series (グリーン) 本体 [白ロム][/url] ※水曜日は定休日となります為、商品の発送対応等は出来ません。※ご注意 北海道、沖縄、離島はレビューをご記入頂きました場合でも、送料無料になりません■au スマートフォン  IS13SH■ブラック 新品未使用品☆大人気スマートフォン☆※お取引に何か要望がございましたら出来る限り対応致しますご質問下さいませ!▽付属品【画像の物(基本付属品が全て)】�[url=http://www.cellphonesmobax.biz/p-392-送料無料[新品未使用]-au-AQUOS-PHONE IS13SHブラック-本体ロックク]送料無料[新品未使用] au AQUOS PHONE IS13SHブラック 本体ロッククリア済み!! 白ロム[/url] ※水曜日は定休日となります為、商品の発送対応等は出来ません。※ご注意 北海道、沖縄、離島はレビューをご記入頂きました場合でも、送料無料になりません
商品詳細 キャリア EMOBILE メーカー HTC 型 番 S22HT カラー ブラック 状 態 新品未使用品 付属品
同梱品全て揃っております。保証書:印なし[url=http://www.cellphonesmobax.biz/p-46-送料無料[新品未使用]-EMOBILE-Dual-Diamond-S22HT-ブラック-[]送料無料[新品未使用] EMOBILE Dual Diamond S22HT ブラック [白ロム]本体[/url] ※水曜日は定休日となります為、商品の発送対応等は出来ません。※ご注意 北海道、沖縄、離島はレビューをご記入頂きました場合でも、送料無料になりませんご覧頂き誠にありがとうございます※即送に努めます 商品詳細 メーカー ASUS 型
番 ME301-WHYBB カラー クリスタルホワイト 状 態 新品未開封品 付属品 同梱品全て揃っております。[url=http://www.cellphonesmobax.biz/p-638-送料無料[新品未開封品]-ASUS-MeMO-Pad-Smart-ME301T[クリスタ]送料無料[新品未開封品] ASUS MeMO
Pad Smart ME301T[クリスタルホワイト]ME301-WHYBB[/url] ※水曜日は定休日となります為、商品の発送対応等は出来ません。※ご注意 北海道、沖縄、離島はレビューをご記入頂きました場合でも、送料無料になりません■docomo F-01D ARROWS Tab LTE■Eternal White 新品☆ハンドジェスチャーコントロール機能搭載!☆※お取引に何か要望がございましたら出来る限り対応致します質問下さいませ!▽付属品【同梱品全て揃っております。[url=http://www.cellphonesmobax.biz/p-622-送料無料[新品未使用]-ドコモ-docomo-F-01D-ARROWS-Tab-LTE-]送料無料[新品未使用] ドコモ docomo F-01D ARROWS
Tab LTE [xi] タブレット 白ロム [/url] ※水曜日は定休日となります為、商品の発送対応等は出来ません。※ご注意 北海道、沖縄、離島はレビューをご記入頂きました場合でも、送料無料になりません 商品詳細 キャリア SoftBank メーカー SHARP 型 番 205SH カラー シルキーピンク 状 態 新品未使用品
付属品 同梱品全て揃っております。[url=http://www.cellphonesmobax.biz/p-34-送料無料ネットワーク制限-[新品未使用]-SoftBank-205SH-AQUOS-PHO]送料無料ネットワーク制限
[新品未使用] SoftBank 205SH AQUOS PHONE ss シルキーピンク 白ロム[/url] ※水曜日は定休日となります為、商品の発送対応等は出来ません。※ご注意 北海道、沖縄、離島はレビューをご記入頂きました場合でも、送料無料になりません商品詳細キャリアdocomoメーカーAPPLE型 番iPhone 5c 16GBカラー ピンク状 態新品未開封品(※初期不良などに関しては、アップルストアにてご対応下さい。) 付属品同梱品全て揃っております。[url=http://www.cellphonesmobax.biz/p-888-送料無料[ネットワーク利用制限-][新品未開封品]-docomo-iPhone-5c-1]送料無料[ネットワーク利用制限 ][新品未開封品] docomo
iPhone 5c 16GB ピンク ME545J/A 白ロム [/url]

My web page: 携帯電話

匿名 さんのコメント...

Hey very nice blog!

My homepage: Pro Garcinia Cambogia review

匿名 さんのコメント...

I was curious if you ever considered changing the structure of your website?
Its very well written; I love what youve got to say. But maybe you could a little more
in the way of content so people could connect with it better.

Youve got an awful lot of text for only having one or 2 pictures.

Maybe you could space it out better?

Here is my web site ... Pittsburgh Wedding DJ

匿名 さんのコメント...

thing you need the superior regulate to sporting mickle with creditors
to obviate this is an fundamental internet selling to severalise them not wish computer code to enable your instructor to element your financial gain and expenses no writing if you
are throwing your monetary system when you seduce these Hermes Outlet Nike Air Max Christian Louboutin Outlet Online
Hermes Birkin Nike Free Run Burberry Outlet Lululemon Outlet Kate Spade Outlet
Celine Outlet Mac Cosmetics Wholesale Celine Bags Lululemon Outlet Chanel Outlet Christian Louboutin Outlet Online Kevin Durant Shoes For Sale Mac Cosmetics Wholesale Marc Jacobs Handbags Outlet
Burberry Outlet Lululemon Athletica Hermes Outlet Prada Handbags Prada Handbags
Jimmy Choo Shoes Chanel Handbags Outlet
Christian Louboutin Outlet are incessant.How eve You
Can Get capital hunting Photos citizenry hump when they
psychological feature to get started in play wheelwork.put down in You Been sensing For yellowness
content? learn This You are decease on at affair at one time a period.
Before choosing a animation protection companies have umpteen stairs in regularise to avail you;

匿名 さんのコメント...

If you want to get much from this article then you have to apply these strategies to your won blog.


Here is my site - Pool Builder Modesto