初心者のためのExtJS入門スマートフォン用の表示で見る初心者のためのExtJS入門ExtJSを使うので、ついでにまとめていきます2017-02-09グリッドの機能:ドラッグ&ドロップ[classic]ExtJSExt.grid.plugin.DragDropプラグインを使うと、グリッドの行をドラッグ&ドロップで操作できます。メモ一覧グリッドクラス。]});編集用のプラグインと違い、viewConfigにプラグインを設定します。viewConfigは、グリッドが内部で生成するExt.view.Tableに渡されるコンフィグです。これだけでグリッドの行をドラッグ&ドロップで移動できるようになりました。次に、2つのグリッドを作成して、グリッド間で行を移動させてみました。グリッドの実装はほとんど変わりません。選択メモストアクラス。メモ一覧グリッドクラス。選択メモ一覧グリッドクラス。メモ一覧パネルクラス。]});↑では、左のグリッドから右のグリッドへ移動させています。逆向きの移動も可能です。プラグインは最初の例と同じく単純に設定した状態です。指定がなければ、別のグリッドでも移動が可能であることがわかります。移動を制限するExt.grid.plugin.DragDropのddGroupコンフィグが一致しない場合は移動できません。指定しない場合は、デフォルト値GridDDとなっています。メモ一覧グリッドクラス。選択メモ一覧グリッドクラス。]});↑のように、移動させようとすると×アイコンが表示されました。他にもenableDragやenableDropコンフィグを使うと、ドラッグだけ許可したり、ドロップだけ許可したりといった制限も付けられます。データによって移動を制限したいのであれば、イベントハンドラで処理することもできます。選択メモ一覧グリッドクラス。}});例えば↑のように、beforedropイベントでfalseを返すとドロップがキャンセルされます。dataに設定されているモデルの内容によって、falseを返すことで移動を制限することができます。ちなみに、falseを返す代わりに、dropHandlers.cancelDrop()を実行してもキャンセルできます。違いは元の位置に戻るアクションが付くかどうかです。そもそも特定の行をドラッグできないようにしたいんだけど、という場合は一応ドラッグする側のグリッドのbeforeitemmousedownイベントでfalseを返すと止めることはできます。メモ一覧グリッドクラス。}});↑は仕様によっては問題が発生するかもしれません。編集できるようにしている場合に処理が中断されることがありそうですし、複数行の場合にどうするかといった問題も発生しそうです。ここでは、ドラッグ操作以前のイベントで禁止にできなくはないということで一応紹介しました。移動ではなくコピーするExt.grid.plugin.DragDropのcopyコンフィグをtrueにするとコピーになります。メモ一覧グリッドクラス。]});データに応じてコピーしたい場合は、イベントハンドラで処理します。選択メモ一覧グリッドクラス。}});↑のようにbeforedropイベントの第2引数dataのcopyプロパティをtrueにするとコピーになるので、data.recordsの値に応じた対応が可能です。ドラッグに合わせてスクロールしたいExt.grid.plugin.DragDropプラグインのcontainerScrollコンフィグをtrueにすると、移動のドラッグ中にグリッドのスクロール位置を調整してくれるようになります。移動後に行の位置を保存するブラウザのリロード後も、移動した行の位置を維持したいのであれば、位置をデータとして残す必要があります。そのためには、位置を表す項目をモデルが持っておくべきです。ここでは、位置を表す項目としてsortフィールドを追加してみます。}});次に、ストアの並び順を指定します。]});sortersコンフィグを指定することで、ストア内のデータの並び順を設定できます。remoteSortをtrueにすると、サーバ側に並べ替えを委ねることができます(ただ、今はプロキシをローカルストレージにしているので、実際にはプロキシクラスの内部でソートしてるんですが)。今回remoteSortをtrueにしているのは、ストアのeachで並び順をまとめて変更するためです。なければ、eachのループ順が常にsortersの影響を受けてしまいます。最後に、dropイベントでsortを変更し、ローカルストレージに反映します。(ビューコントローラはもう省略してますよ。メモ一覧グリッドクラス。メモ一覧パネルクラス。}});これでうまくいきました。02:21グリッドの機能:ドラッグ&ドロップ[classic]Tweet広告を非表示にする関連記事2017-08-19ツリーパネル[modern]今回はmodernのツリーパネルです。(2)今回はツリーグリッドを取り上げます。Ext.tre...2017-02-21グリッドの機能:ページング[modern]modernのグリッドでページングしてみます。Ext.grid.plugin.Pa...2017-02-19グリッドの機能:編集[modern]今回はmodernのグリッド編集を試しました。(2)ツリーパネル[modern]任意のコンフィグを双方向バインディングに対応するスポットライト[classic]Googleマップアイコンフォントアイコンフォントのパッケージ作成suspendLayouts・resumeLayoutsES6で書いてみるExt.Deferredで非同期処理をまとめるビューモデルのデータにモデルを設定して使用するプラグインの作り方ミックスインの作り方ボタンのUIにバインディングできるように工夫するはてなブログをはじめよう!sham-memoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。