HOME > 開発者向けBLOG > Ext JS >  Sencha Ext JS6を使ったスプレッドシートの紹介1

Technology Note 開発者向けBLOG

Ext JS

Sencha Ext JS6を使ったスプレッドシートの紹介1

こんにちは、ゼノフィ後藤です。

今回はSencha Ext JS6で追加されたスプレッドシートの機能を紹介します。

業務系のシステム開発で要件定義や設計をしているときに、クライアントから「Excelみたいに」とか「Excelっぽい動きで」という要望を受けることってないですか?僕は結構あります(笑)。
システムのリプレイス案件では特に多かったりするのですが、やはり昔からシステムを触っている人にとって、「Excelっぽい動き」は馴染み深いのだと思います。

Senchaでは色々なUIコンポーネントが用意されていますが、Grid(表)は特に力が入っているコンポーネントの1つです。動きに関してもパフォーマンスに関しても、類似したフレームワークでこれほど洗練されているのは、他にはないと思います。設定1つで色々な制御や処理に対応できるようになっているため、実際に開発していても一から何かを作り込むことは少なく用意されている中で解決できることが多いです。

今回紹介するスプレットシートのコンポーネント自体は、Sencha Ext JS5.1で追加されたのですが、Sencha Ext JS6で、Excelのようにセルの右下をドラッグして、セル値のコピーや連続データを設定する処理が簡単にできるようになったので紹介したいと思います。(以下のイメージを参考)

Excelのドラッグイメージ

まず、今回の処理をSenchaを使わないで対応しようとするとどうでしょう。ぱっと思いつくだけで見積もっても、以下のような対応が必要になるかと思います。結構しんどいですよね。。。

  • tableタグで表を作成
  • tdタグにdivタグやinput(text)タグを配置
  • Excelっぽくドラッグ出来るように、セル選択時に右下にドラッグできるような装飾の設定
  • 実際にドラッグしている時のスタイルの設定
  • ドラッグしたときのイベント発火と処理の実装

このようなめんどくさい処理でもSencha Ext JS6を使用すると既に用意されている設定のみで対応可能です。既にSenchaを触ったことある方であれば、設定値を知っていればドラッグされた時の処理だけ仕様に合わせてコーディングすることで対応可能です。

まずは実際に動くものを触った方がイメージがつきやすいと思うので、以下のURLにPCでアクセスしてください。
Sencha Ext JS6のサンプル

サンプル画面の動き

  • メニューのGroupsを選択して表示されたGrid(表)のセルをクリックしてください。
    セルが黄色くなり選択状態となります。

ドラッグ1

  • セルの右下に青い四角が表示されているので、ドラッグして下に引っ張ってください。

ドラッグ2

  • ドラッグされた中に含まれるセルの値が変わっていることを確認してください。

ドラッグ3

コーディング例

ざっくりですが、コーディングイメージは以下になります。
スプレッドシートの設定とドラッグ時の処理を追記するだけで、それ以外はSenchaを使った人だと馴染みがある
ただのGridです。ドラッグ時の処理は、項目の仕様にあわせて実装するのがいいと考えています。今回のサンプルは、行と列のそれぞれに対して単一選択のコピー処理のみ実装してあります。Excelと完全互換にするためには、連番や複数セル選択時の処理などを追記していくことになります。

コード1

コード2

まとめ

今回のサンプルはどうだったでしょうか?実際にExcelっぽい対応を求められたときに、自分で1つずつ対応する場合とSenchaを使用する場合で心づもりが結構変わってくるのではないでしょうか(笑)?

エンジニアにとっては実装が楽になりますし、クライアントにとってはコストを下げれますし、パッケージ開発されている方にとっては他社との差別化を図りやすくなると思いますので、システム要件にマッチする場合はSenchaの導入をご検討してみてはいかがでしょうか。

PAGETOP