初心者のためのExtJS入門スマートフォン用の表示で見る初心者のためのExtJS入門ExtJSを使うので、ついでにまとめていきます2017-07-17レスポンシブ対応ExtJS今回はレスポンシブ対応を試してみます。CSSではメディアクエリを使ってレスポンシブ対応しますが、ExtJSではExt.plugin.Responsiveクラスを使いjavascript上で処理します。ExtJSのコードをざっと見た感じでは、resizeイベント発火を起点にしているようです。基本的な実装方法Ext.plugin.Responsiveプラグインを使用するようにして、responsiveConfigコンフィグで状態に応じた設定を指定します。}});それぞれブラウザの幅が800px未満、800px以上の場合の表示です。800のように指定することで、対象コンポーネントのwidthが800px未満と800px以上という条件を指定できます。それぞれの場合にどのような値を設定するかを、条件の値としてオブジェクトリテラルで指定できます。実用的な使い方だとこんな風にもできます。ナビゲーションメニューの位置を、幅によって切り替えることを想定しています。]});注意点setメソッドがない場合は自分で定義する必要があるresponsiveConfigコンフィグに指定する値として、気を付けなければならない点があります。レスポンシブの内部処理は、指定された設定値のキーに対してsetメソッドを呼び出すようになっています。そのためsetメソッドが実装されていないコンフィグを指定した場合は、値が切り替わりません。clsコンフィグを切り替えようと、下記のようにしても反映されません。}}このような場合は、自分でsetメソッドを用意してあげる必要があります。現在のレスポンシブによるセレクタ名。clsコンフィグのsetメソッド(レスポンシブプラグインで呼び出される)。}}あまりスマートな記述ではありませんが、一応期待通りになりました。aこういうsetメソッドはプラグインとして作成したほうが良いでしょうね。modernのプラグインの動作があやしいバグかもしれませんが、modernのExt.plugin.Responsiveの動作が若干怪しいです。メインビューで直接レスポンシブを指定する場合は動作しましたが、ビューをクラス定義してその中でレスポンシブ指定するとなぜか動作しませんでした。ExtJS6.5.1に期待します。13:28レスポンシブ対応Tweet広告を非表示にする関連記事2017-08-19ツリーパネル[modern]今回はmodernのツリーパネルです。(2)今回はツリーグリッドを取り上げます。Ext.tre...2017-04-17レイアウト[modern]今回はmodernのレイアウトを取り上げます。(3)classicのレイアウトは最後です。(2)ツリーパネル[modern]任意のコンフィグを双方向バインディングに対応するスポットライト[classic]Googleマップアイコンフォントアイコンフォントのパッケージ作成suspendLayouts・resumeLayoutsES6で書いてみるExt.Deferredで非同期処理をまとめるビューモデルのデータにモデルを設定して使用するプラグインの作り方ミックスインの作り方ボタンのUIにバインディングできるように工夫するはてなブログをはじめよう!sham-memoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。