初心者のためのExtJS入門

ExtJSを使うので、ついでにまとめていきます

ExtJS

アプリケーションを本番用にビルドする

今回の話題はビルドです。 ビルドコマンド 開発途中は↓のコマンドを使います。チュートリアルでも、このコマンドを使っていました。このコマンドは簡易的なビルドとサーバ起動を行ってくれます。 sencha app watch [classic|modern] 本番環境で稼働させる場…

チュートリアル:削除処理の実装(modern)

今回はメモを削除できるようにします。 削除だけだと、あまりにも内容が薄いので、少し細かい部分も実装します。 削除ボタンの設置と削除処理 削除ボタンは一覧画面に設置することにしました。 FontAwesomeアイコンのxマークで削除ボタンを表現しています。 …

チュートリアル:ルーティングを使って、SPA(シングルページアプリケーション)にする(modern)

今回は、SPA対応のmodern版です。 まあ、classicとほとんど同じなのですが。。。 ルーティングの設定 メインパネルにビューコントローラを設定し、そのビューコントローラにルーティングを定義します。 /** * メインパネルクラス。 * * @class Memo.view.mai…

チュートリアル:登録画面の作成(modern)

次に登録画面を作成します。 まだビューコントローラとビューモデルは作成せず、ビュー部分だけ作ってみます。 /** * メモ登録フォームパネルクラス。 * * @class Memo.view.regist.Panel * @extend Ext.form.Panel */ Ext.define('Memo.view.regist.Panel',…

チュートリアル:一覧画面を作成する(modern)

これからclassicで作った画面の、modern版を作成していきます。 まずはメモ一覧画面です。 モデル、ストアを作成する ここはclassicのときと同じです。ただし、プロキシを一旦memoryに戻します。 ビューコントローラを作る頃に、またlocalstorageにします。 …

チュートリアル:モバイル向けの画面を作成してみる

前回までで、メモを残せるアプリケーションがおおよそ完成しました。 しかし、それはあくまでPCブラウザ向けです。 今回からは、モバイル向けの画面を作ってみます。(ちなみに、チュートリアルはモバイル向けまで完成したら終わりにするつもりです) 予備知識…

チュートリアル:ストアのプロキシを変更する

今回はストアのプロキシをローカルストレージに変更します。 これで、一応データを保存できるようになります。ローカルストレージにですが。。。(サーバ側が無いのでやむなし) ストアのプロキシ変更 まずはストアのプロキシを変更して、ローカルストレージを…

チュートリアル:ルーティングを使って、SPA(シングルページアプリケーション)にする(2)

今回はSPAの続きです。 ルーティングで画面を切り替える部分は実装しましたが、残りの部分を修正していきます。 新規作成、編集のURLパターンを分ける 登録画面のパターンとしては、新規作成と編集の2つがあります。 そこで、下記のようにしてみます。 #regi…

チュートリアル:ルーティングを使って、SPA(シングルページアプリケーション)にする(1)

今回は、メモ一覧とメモ入力フォームを別の画面に分けて、ルーティングを使って画面遷移できるようにします。 ルーティングは、URLのパターンで処理を切り替える機能です。これを使ってSPAにします。 最終的には、http://localhost:1841/#listにアクセスした…

チュートリアル:ビューモデルを使って、フォームパネルを編集に対応させる

今回は、保存しているメモを編集できるようにしたい、という内容です。 編集したいメモを選択すると入力フォームに転記されて保存ボタンを押すと編集内容が反映される、といったかんじにしようと思います。 これだけだと、メモを選択したあとに、新規登録に…

チュートリアル:モデル、ストアを作成する

今回はモデルとストアを作成します。 これまではデータビューのstoreコンフィグでストアを簡易な形式で設定していましたが、これを別ファイルとして作成することにします。 事前準備 作成する前に、ファイルを整理します。 まずはapp/Application.jsをclassi…

チュートリアル:スタイルを整える

現在の画面は↓なかんじになっているわけですが。。。 これを見て気付くことがあります。。。そうダサいですね。こんなものを使うわけありません。 ということで、今回はスタイルを整えてみます。 layoutを指定する まずはlayoutコンフィグを指定して、画面の…

チュートリアル:フォームパネルの機能を使う

フォームパネルの機能を使ってリファクタリング まずはフォームパネル(Ext.form.Panel)の機能を使って、さらにリファクタリングします。 /** * ビューポートクラス。 * * @class Memo.view.main.Main * @extend Ext.Panel */ Ext.define('Memo.view.main.Mai…

チュートリアル:referenceを使って参照する

フォームの入力欄をカスタマイズすることにしました。 入力項目は「タイトル」「本文」の2つです(だんだんメモ登録っぽくしていってます)。 /** * ビューポートクラス。 * * @class Memo.view.main.Main * @extend Ext.Panel */ Ext.define('Memo.view.main.…

チュートリアル:ビューコントローラを使う

ExtJSには、ビューコントローラという機能があります。これによってボタン押したり行を選択したりした場合のイベント発火時の処理をビューから切り離すことができます。 前に定義した保存ボタンクリック時の処理を、ビューコントローラに移してみました。 ま…

チュートリアル:基本的なコンポーネントを使ってみる

コンポーネントの配置 Example(http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#components)を見ながら、ExtJSが標準で提供しているコンポーネントを試してみました。 どんなものがあるかは、Exampleを見るのが一番だと思います。 /** * ビュ…

チュートリアル:ビューポートを変更してみる

senchaコマンドでExtJSアプリケーションの雛型を作成しました。app, classicなどのディレクトリやapp.jsonなどのファイルが自動的に作成されています。ここからは具体的に作りながら覚えていきましょう。まずは慣れたいので浅い説明だけしていきます。 まず…

ExtJSを導入する

ExtJSはSenchaが提供しているWebページのフロントエンド用フレームワークです。 グリッドやチャートなど高機能なUI部品が多数用意されており、私はとても便利に感じています。 どういう表現が可能になるかはサンプルで確認できます(http://examples.sencha.c…