初心者のためのExtJS入門スマートフォン用の表示で見る初心者のためのExtJS入門ExtJSを使うので、ついでにまとめていきます2017-05-08ダッシュボード[classic]ExtJSExt.dashboard.Dashboardを使うと、業務系の画面でよくあるダッシュボードのUIを実現できます。partsコンフィグに、適当なキー名でExt.dashboard.Partクラスのコンフィグを指定します。Ext.dashboard.PartのviewTemplateコンフィグのitemsに表示したいビューを指定することになります。partsコンフィグだけでは表示されないです。defaultContentコンフィグには、最低限typeとcolumnIndexを指定したオブジェクトリテラルの配列を指定します。ここでtypeはpartsコンフィグで指定したキー名、columnIndexは列のインデックス番号(0から)です。ダッシュボードパネルクラス。]});上記だと、testKeyのビューを4つダッシュボードに表示しています。columnIndex=1を2つ指定しているので、2列目のビューは2つになっています。ドラッグ&ドロップ操作で場所を移動させることができます。動的にビューを追加するボタンクリック時にビューを追加してみます。ダッシュボードパネルクラス。ビューコントローラクラス。}});Ext.dashboard.DashboardのaddNewメソッドで追加できます。第1引数はpartsコンフィグに定義したキー名、第2引数は列のインデックス番号です。これだとpartsコンフィグに定義されていない呼び出せないです。partsコンフィグにも動的に追加してみます。ダッシュボードパネルクラス。ビューコントローラクラス。列1に追加ボタンクリック時の処理。第1,2引数は、応用を考えて仮の値を固定値で渡している。実際には、他の入力フィールドの値やサーバからのレスポンスデータを渡すことが考えられる。列2に追加ボタンクリック時の処理。コンポーネントを追加する。Ext.dashboard.Partのコンフィグを返す。Ext.dashboard.Partに設定するアイテムコンポーネントのコンフィグを返す。partsコンフィグのキーを返す。}});少し応用などを考えた実装になっていますが、やりたかったことの実装部分はaddComponentメソッドです。注意としては、Ext.dashboard.DashboardクラスのcolumnWidthsコンフィグを指定しておくことです。columnWidthsコンフィグは列の幅の割合を、1を分け合う値で指定するのですが、これを指定していないとおかしな挙動になります。ビューの削除やドロップのイベントについても取り上げようと思いましたが、Ext.dashboardパッケージのクラスのソースを見ればわかりそうなので今回は割愛です。(2)今回はツリーグリッドを取り上げます。(2)今回はclassicのチャートの続きです。(1)今回はclassicのレイアウトを取り上げます(何回かに分けます)。...2017-03-11バリデーション:classicのようにエラーテキストを画面に表示させる[modern]※ExtJS6.5.0からmodernのエラー表示の機能が強化され、標準機能...2017-02-19グリッドの機能:編集[modern]今回はmodernのグリッド編集を試しました。(2)ツリーパネル[modern]任意のコンフィグを双方向バインディングに対応するスポットライト[classic]Googleマップアイコンフォントアイコンフォントのパッケージ作成suspendLayouts・resumeLayoutsES6で書いてみるExt.Deferredで非同期処理をまとめるビューモデルのデータにモデルを設定して使用するプラグインの作り方ミックスインの作り方ボタンのUIにバインディングできるように工夫するはてなブログをはじめよう!sham-memoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。