(1)ExtJS今回はclassicのツリーパネルを取り上げます。ツリーパネルでは、エクスプローラでディレクトリやファイルの位置関係を階層構造で表現するUIを提供できるビューです。modernにも同じようなビューがありますが、classicとはクラス名が異なるため今回はclassicのみ対象とします(次はmodernを取り上げる予定)。基本的な使い方モデル、ストアモデルにはExt.data.TreeModelクラス、ストアにはExt.data.TreeStoreクラスを使います。}});上記ではストアのデータをインメモリにしていますが、ツリーストア用のデータ構造にする必要がある点に注意してください。最上位の位置にルートノードが必要です。その直下に所属すべきノードをchildrenプロパティで並べていきます。trueを指定しましょう。ノードのtextプロパティは、ビューに表示されるテキストです。(これtextから変更できるのかな?捜したけど見つからなかったです)idプロパティは内部的に使っているみたいで、モデルのフィールドに定義したらエラーとなりました。何かIDとして付けておきたい場合は、別のフィールド名で用意しておくようにしましょう。他にも使えるプロパティがありますが、詳細は下記リンクからドキュメントを参照してください。Ext.data.NodeInterfaceのコンフィグがほとんどそのまま指定できます。http://docs.sencha.com/extjs/6.5.1/classic/Ext.data.NodeInterface.htmlhttp://docs.sencha.com/extjs/6.5.1/classic/Ext.data.TreeStore.html#cfg-rootビューあとはExt.tree.Panelでビューを作成し、storeに先ほど作成したストアを指定します。falseとすることでルートノードを表示しないように制御できます。childTypeでノードごとにモデルを切り替えられるツリーストアの場合、ノードごとにモデルを指定できます(使うべき場面を思いつかなかった。childTypeを知らなかったのでとりあえず書いときました)http://docs.sencha.com/extjs/6.5.1/classic/Ext.tree.Panel.htmlロードサーバにリクエストを投げる場合、まずは通常のストアのようにプロキシを設定します。}});これでloadメソッドが呼ばれると、下記のようにnodeというリクエストパラメータ付きでリクエストされます。これはTreeStoreのnodeParamとdefaultRootIdで変更できます。1でリクエストされます。(ちなみに0はダメみたいです。'root'のままでサーバ側で判定しても良いのかもね)ルートノードより下位のノードでは、各ノードのidプロパティの値を使って展開時にリクエストされるようになっています。一度展開したノードは、一旦閉じてから再度展開してもロードしないようです。その場合もロードさせたい場合は、下記のように無理やりloadedをfalseにすればロードしてくれました。良い方法を知っていれば誰か教えてください。}});ちなみに、サーバからは下記のようなレスポンスを返します。trueのノードが無限ロードするという現象が発生したので、ご注意を。追加、削除ノードの追加、削除はモデルに対して行います。Ext.data.TreeModelはExt.data.NodeInterfaceの機能を使えるようになっているので、appendChild、removeメソッドを呼ぶことができます。}}selectionchangeのタイミングで追加、削除というかなり雑なコードになっていますが、モデルに対してこのように記述すると、対象ノードの子ノードとして追加したり削除したりできます。ドラッグ&ドロップExt.tree.plugin.TreeViewDragDropプラグインを使います。false});そのうえで、ノードのallowDrag、allowDropでドラッグ、ドロップ可否を制御できます。ドロップ時にbeforedrop、dropイベントが発生するので、処理はそのタイミングで実行します。(1)Tweet広告を非表示にする関連記事2017-09-03スポットライト[classic]今回はExt.ux.Spotlightの紹介です。Exampleを眺めていたら見...2017-08-19ツリーパネル[modern]今回はmodernのツリーパネルです。(2)今回はツリーグリッドを取り上げます。Ext.tre...2017-06-06(ExtJS6.5)リストの新機能[modern]今回はリストの追加機能を取り上げます。(2)今回もExtJS6.5のmodernグリッド改善点です。(2)ツリーパネル[modern]任意のコンフィグを双方向バインディングに対応するスポットライト[classic]Googleマップアイコンフォントアイコンフォントのパッケージ作成suspendLayouts・resumeLayoutsES6で書いてみるExt.Deferredで非同期処理をまとめるビューモデルのデータにモデルを設定して使用するプラグインの作り方ミックスインの作り方ボタンのUIにバインディングできるように工夫するはてなブログをはじめよう!sham-memoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。