初心者のためのExtJS入門スマートフォン用の表示で見る初心者のためのExtJS入門ExtJSを使うので、ついでにまとめていきます2019-03-10ExtJS6.6の新機能ExtJS最後の更新からかなり間が空きました。ExtJS6.6を触ったので追加機能のうち大き目っぽい2つだけ取り上げます(執筆の途中でExtJS6.7が出たようで、ちょっと今更感ありますが。)ext-genコマンドext-genというNodeモジュールでアプリケーションの作成などができるようになったみたいです。まとめてくださっている方がいらっしゃるので、詳しくはリンク先を参照ください。https://qiita.com/martini3oz/items/5c94e11322c33697c8b3私はWindows64bitで開発してますが、ext-genのインストールになぜか失敗したところで挫折しました。nodeやnpmのバージョンを上げてみたりしたのですが、これまで通りSenchaコマンドで作成することも可能だったので「じゃあ別にいいや」と。ExtJS6.7はどうなのかちょっと分からない状況です(ちなみにExtJS6.7のトライアル版ではext-genでのアプリケーション作成に成功しました)。ExtJS6.6まではトライアル版をダウンロードしてSenchaコマンドでの作成を試せましたが、ExtJS6.7からはトライアル版は完全にNodeモジュールでしか提供されていないようなので。ライセンス周りの対応が厳しくなってきたように感じます。ルーティングの指定が柔軟になったルーティングの書き方が柔軟になりました。}上記のように、以前は「user/:id」と書いていたところを「user/:{id}」と指定できるようになりました。なるかというと、コールバック関数の引数にオブジェクトとして渡され「values.id」のように値を参照できるようになりました。以前は「user/:id」であれば、コールバック関数の第1引数がそのまま:idの値になっていたのが異なるところです。複数のパラメータが出てくると、オブジェクトのほうが扱いやすそうです。以前よりも簡潔にパラメータに制限をかけられるようになりました。「user/:{id:num}」とすることで、idの部分を数値のみに制限できます。さいごにエンバカデロに買収されて以降、正直ExtJS大丈夫かいな?という気持ちはずっとあります。ExtJS自体は評価していますし、SPAの業務アプリケーションを作成するという場合は非常に優秀なフロントエンドライブラリであることは間違いないので、ひとまずExtJS7までは見守っていくつもりです。仕事なんかでも参考にできる機能や実装なんかもあるだろうし。Vue.jsのVuetifyあたりはUIコンポーネントがなかなか良さげなので、試した感触が良さそうなら乗り換える気持ちもあります。ライブラリの選定が難しい時期にきてます。いずれにしても、ライセンス周りの対応でここまでガチガチにされてくると、さらに普及の障害になるのではないかと考えています。18:05ExtJS6.6の新機能Tweet広告を非表示にするもっと読むコメントを書く2018-02-20ボタンのUIにバインディングできるように工夫するExtJSボタンのテキストやUIをデータバインディングで変更したいときがあります。テキストははじめからできるようになっているのですが、なぜかUIはできるようになっていません(注意:ExtJS6.5.2時点までの話です)。根本的なところはsetUiメソッドが定義されていないからです(代わりにsetUIメソッドが存在しています)。下記のようなオーバーライドクラスを定義しておくことで対応できます。Ext.button.Buttonのオーバーライドクラス。}});これで下記のようにuiへのバインディングが可能になります。14:35ボタンのUIにバインディングできるように工夫するTweet広告を非表示にするもっと読むコメントを書く2018-01-08ミックスインの作り方ExtJS今回はミックスインを作ってみます。ミックスインは、利用するクラスにメソッド、プロパティを追加して利用できるようにするもので、同じような機能が必要になる場合に有用です。プラグインに似ていますが、下記の違いがあります。プラグインの場合はpluginsプロパティ指定時にパラメータを指定できるが、ミックスインはできない。プラグインの場合はあくまで内部にプラグインのインスタンスを保持しているだけで、プラグインクラスで定義しているメソッド等が利用する側のクラスに影響しないが、ミックスインで定義したメソッド等は利用する側のクラスに定義される。ミックスインクラス作成ミックスインクラスを作ってみましょう。}});ミックスインとして定義するクラスは、特に継承する必要はありません。作法としてmixinIdプロパティを指定するようにしましょう。あとは必要なプロパティやメソッドを定義するだけです。ミックスインクラスを使う次に作成したミックスインクラスを使ってみます。}});ミックスインクラスを使うようにするには、mixinsプロパティでクラス名を指定します。これでミックスインクラスで定義されたプロパティやメソッドを呼び出せるようになったので、ボタンを押してもgreetメソッドが解決できます。実際に確認しても、利用する側のクラスにメソッドやプロパティが定義されていることが分かります。正直なところ、私自身、継承・プラグイン・ミックスインの厳密な使い分けまでは理解できていません。19:00ミックスインの作り方Tweet広告を非表示にするもっと読むコメントを書く2017-12-02プラグインの作り方ExtJS今回はプラグインを作ってみます(まあ、プラグインを自作しないといけない場面はあまり無いと思いますが...)。プラグインは、コンポーネントに機能を追加するものです。プラグインのクラスはExt.plugin.Abstractを継承して作成します。作成したプラグインは、pluginsコンフィグにエイリアス名を指定して使用できます。Worldを追記するというプラグイン(?)です。'sample'});プラグインの初期処理はinitメソッド、終了処理はdestroyメソッドに記述します。initメソッドでイベントを割り当てているような場合は、ちゃんと解除するように気を付けましょう。プラグイン作成はめんどくさいと感じることもありますが、1つ作れば使い回せるので開発を続ける場合は結構便利です。私の場合は、どの案件でも使えるのでファイルをドラッグ&ドロップでアップロードする機能をプラグイン化しています。17:58プラグインの作り方Tweet広告を非表示にするもっと読むコメントを書く2017-11-12ビューモデルのデータにモデルを設定して使用するExtJSビューモデルに、データのモデルを設定することがあります。今回は、その際の使い方や注意点を取り上げます。使用するモデルやデータは下記の通りです。}}モデルのプロパティをバインディング{record.name}のように記述することで、モデルのプロパティをバインディングできます。アソシエーションのモデルでも同様です。]});モデルの値が変更されても、ちゃんとビューに反映されます。'9999999');}アソシエーションのストアをバインディングプロパティと同じようにして、アソシエーションのストアもバインディングできます。]});注意点formulasを使うときに注意することがあります。下記のようなコードを書いたとします。]});これは一見すると良さそうですが、下記のような値の変更でビューが更新されません。'東京都');}get('record.address.state')のように、直接対象のプロパティを取得するように書き直すことで改善します。}});うっかり間違えてしまう典型的なパターンなので注意するようにしましょう。Promiseによる非同期処理をまとめる機能が存在します。複数のロードが必要な場合にコールバック地獄とならないようにする、最近ではお馴染みの手法ですね。ロード終了まで画面をマスクしたり、ロードのタイミングを調整したりするのに重宝します。ExtJSでは特に複数データのロードが必要になるので、使う場面が多いです。サンプルExtJSでは、Ext.Deferredクラスを使います。必要なExt.Deferredのインスタンスを用意して、Ext.Deferred.allメソッドに渡し、thenメソッドに完了時の処理を記述します。あとは各処理が終わったタイミングで、Ext.Deferredのインスタンスのresolveメソッドまたはrejectメソッドを呼び出します。thenの第1引数が全てresolveとなった場合に呼び出されます。1つでもrejectとなった場合は第2引数の処理が呼び出されます。1000);}上記の場合、実行結果は下記のようになります。resolve1つでもrejectとなった場合、thenメソッドの第2引数の処理が呼ばれているのが分かります。残りの処理が終わるのを待たずに呼び出されることに注意が必要です。15:05Ext.Deferredで非同期処理をまとめるTweet広告を非表示にするもっと読むコメントを書く2017-10-29ES6で書いてみるExtJSExtJS6のコードを、ES6を使って書いてみました。classキーワードではクラス宣言できないので(もし出来るようになっているならぜひ教えてください!!)、そこはExt.defineを使います。メソッド定義などはES6の形式で記述できます。他、あえていくつかES6の機能を使って書いてみました。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。