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

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

スポンサーサイト

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

Sencha ExtJS-GridのDrag And Drop

以前、ExtJSでドラッグ&ドロップするコードを紹介しました。かなり長く複雑なコードでした。Sencha Ext JS 4ではどう書くのか調べてみました。

Ext JS Sencha Docsのページから、一番右のタブをクリックすると、Examplesの画面が開きます。



そこからGrid to Grid DnDを選択すると、実行時の画面とコードの両方が表示されます。これは便利です。



ドラッグ&ドロップの箇所はこの辺りです。

this.items = [{
itemId: 'grid1',
flex: 1,
xtype: 'grid',
multiSelect: true,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: group1,
dropGroup: group2
},
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
Ext.example.msg('Drag from right to left', 'Dropped ' + data.records[0].get('name') + dropOn);
}
}
},

gridのconfigにviewConfigを書き、その中にpluginsでptype: 'gridviewdragdrop'を書いて、dragGroupとdropGroupを書くだけというわかりやすいコードです。ちなみにtreeでドラッグ&ドロップする時は、ptype: 'treeviewdragdrop'と書くようです。Ext JS 3の時より随分簡単になりました。

スポンサーサイト

コメント

コメントの投稿

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

トラックバック

トラックバックURL:http://sookibizviz.blog81.fc2.com/tb.php/1892-51c8212b

■  カレンダー

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