SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

EDN CodeZine出張所(AD)

従来型C/SアプリケーションをSenchaを使ってWeb化してみる

  • X ポスト
  • このエントリーをはてなブックマークに追加

アプリケーションの動作を確認する

 動作するアプリケーションがいったんできあがりました。Sencha Ext JSに用意されたコンポーネントやデータパッケージを用いることで、C/Sアプリケーションで提供してきた機能を容易に実装できることが理解できたと思います。

 作成したアプリケーションをSencha Architectから実行するには、プレビューボタンをクリックします。ブラウザでアプリの動作を確認できます。

図18 プレビューの実行
図18 プレビューの実行

 一覧表示の行を選択すると、URLの遷移なしに検索の実行や詳細画面への切り替わりが行え、デスクトップアプリケーションと同様に操作できることが確認できます。

図19 アプリケーションの実行
図19 アプリケーションの実行

 ところが、この状態はC/Sアプリケーションとは異なり、画面下部のツールバーでのページング操作が必要です。このツールバーはスクロール操作が可能ですが、元のC/Sアプリケーションと比べると操作性で若干劣るように見えます。C/Sアプリケーションと同様の操作性を求めるユーザーの声には応えたいですよね。

 Ext JSでは、このようにスクロールバーだけで操作させたい場合には、VirtualStoreというストアを利用します。

 VirtualStoreの基本的な設定はStoreと同様でProxy、Readerを組み合わせます。設定すべきプロパティ(autoLoad、store.model、proxy.url、reader.rootProperty)も同じです。

 ただし、VirtualStoreはRead Onlyでの利用となるため、通常のStoreとは制御方法が少し異なります。そのため検索やGridの選択、[保存]ボタン、[戻る]ボタンに関するイベントハンドラの実装を修正します。

onSearchfieldKeyup: function(textfield, e, eOpts) {
    if (e.getKey() === e.ENTER) {
        let store = Ext.getStore('MyVirtualStore');
        store.proxy.extraParams = { 'name':textfield.getValue() };
        store.reload();
    }
}

onGridSelect: function(dataview, selected, eOpts) {
    let store  = dataview.getStore('MyVirtualStore');
    let record = store.getAt(selected);

    this.getViewModel().set('record', record);
    this.getView().animateActiveItem(1,'slide');
}

onCancelButtonTap: function(button, e, eOpts) {
    let record = this.getView().getViewModel().getData().record;
    let store  = Ext.getStore('MyVirtualStore');

    store.reload();
    this.getView().animateActiveItem(0,{type:'slide', direction: 'right'});
}

onSaveButtonTap: function(button, e, eOpts) {
    let record = this.getView().getViewModel().getData().record;
    let store = this.getStore('MyVirtualStore');

    store.sync();
    record.save(); // VirtualStore 自体は ReadOnly なので、かわりに Model の record を操作する
    store.reload();
    this.getView().animateActiveItem(0,{type:'slide', direction: 'right'});
}

 これでC/Sアプリケーションと同様の操作性が実現でき、満足のいくWebアプリケーションを提供できるようになりました。

次のページ
まとめ

関連リンク

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
EDN CodeZine出張所連載記事一覧

もっと読む

この記事の著者

EDN編集部(イーディーエヌ編集部)

エンバカデロ・デベロッパーネットワーク(EDN)は、ソフトウェア開発者とデータベース技術者のための技術情報サイトです。Delphi、C++Builderをはじめとする開発ツールやER/Studioなどのデータベースツールに関連する技術記事、ビデオなどを提供しています。EDN編集部は、EDN記事と連携...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/11638 2019/07/23 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング