ExtJS6 今更の事始め2

Sencha Advent Calendar 2015 17日目です。

前回同様、What’s New In Ext JS 6の続きです。

The Treelist Widget

ExtJS6では、Treelistウィジェットが新しく追加されました。

Exampleの Admin Dashboardのサイドメニューにも使われています。
これまではExt.tree.PanelやAccordionレイアウト、DataViewを使ってメニューを作ってましたが、キタ━(・∀・)━!!!!って感じですね。

Treelistウィジェットは、What’s New In Ext JS 6によると以下の様な特徴があるようです。
(Google翻訳です)

  • UIのMixinを提供します。
  • 最上位のノードのアイコンが表示される「マイクロ」モードがあります。
  • TreeStoreの内のすべてのノードをレンダリングします(バッファレンダリングをサポートしていません)。ノードは非同期的に取り出すことができます。
  • ノードは自身がウィジェットとしてレンダリングされます。
  • 選択とホバー「インジケータ」(選択したノード上の青の縦ストリップ)をサポートしています。
  • 単一の選択をサポートしています。
  • 列は1つしかサポートしてません。
  • グリッドのプラグインをサポートしていません。

さっそく使ってみました。

Preview

サンプルを作ってて気づいたんですが、Font Awesomeがデフォルトで使えるようになってますね。
iconClsが利用できるコンポーネントで、x-fa fa-homeと指定すると使えるようです。
Guideにも記載がありました。
Sencha Font Packages