GroupingStore / ViewとExtJSで美しいリストを作成する

今日は、ExtJSをあらゆるデータの美しい（機能的な）リスト、たとえばユーザーやグループのリストにする方法について説明します。 現在のプロジェクトの1つでこのリストを使用します（もう美しくも便利でもありませんが）。このようなウィジェットを使用して、テストラインだけでなく拡張データでも特徴付けられるデータを表示できます。また、それぞれにいくつかのアクションを関連付ける必要もあります募集。 （ストアを介して）動的にデータを更新したり、並べ替えやグループ化を行ったりすることができます。一般的には、ExtJSのグリッドコンポーネントが提供するすべての機能を使用できます。 ExtJS 3.0のバージョンを使用することをすぐに言わなければなりませんが、以前のリリース2.3.xでは、この例も実行可能でなければなりません。 与えられたコンポーネントは例であり、コードを使用する準備が全くできていませんが、可能性のデモンストレーションのみであり、プロジェクトで好きなように変更および修正できます。 同じ理由で、意図的にこの記事のソースコードはありません。



このコンポーネントで考慮した主な点は、アクション間の距離を最小化することです。つまり、リストを見ると、ユーザーは必要な情報（もちろんリストのコンテキストで）をすぐに受信し、それが表示できない場合はアクション自体に関する情報を受け取る必要があります（機会）もすぐに見えるようにする必要があります。 そのため、コンテキストメニューを拒否しました。むしろ、アイコンのアクションをリストに直接複製しました。 したがって、追加のアクション（「ここから他に何ができるか」という質問に対する答えを見つけるためだけにメニューを開く）の必要性を排除し、可能なアクションをすぐに表示します。 同じ原則から進むと、ツールヒントヒントには特定のアイテムを説明する参照情報のみが含まれます。ユーザーが最初にこの要素またはその要素の目的を理解できず、カーソルを移動して明示的にヒントを要求する場合にのみ使用されます。



では、開発に取り掛かりましょう。 リストのデータソースとして、データ配列（ ArrayReaderを使用して読み取り ）を使用し、データストアとしてExt.data.GroupingStoreを使用します。 このサイドでは、フィールドの1つでデータのグループ化を使用できますが、グループのレンダリングで興味深い状況に遭遇しましたが、それについては後で詳しく説明します。 そのため、データをサーバーに転送し、指定された基準に従ってデータを並べ替えてグループ化し、フィールドの1つを使用します。 情報ストアとしての配列は、サーバーから直接データを更新する必要がないことに基づいて選択されました。これには別のメカニズムがあるため、簡単にするために、すべてのデータをローカルに既に持っていると考えています。



ソースデータの構造は次のとおりです。

• グループID一意
• デフォルトのグループアイコン（ファイル名）
• グループ名
• グループ内のユーザー数
• グループコード、これはグループデータの追加配列から拡張情報を取得するためです
• グループの説明

var _user_groups = [ [0, 'user_home.png' , ' ' ,2, 'system' , ' ' ], [10, 'user_home.png' , ' ' ,10, 'profy' , '' ], [20, 'user_home.png' , ' iPhone/iTouch' ,22, 'profy' , '' ], [30, 'user_home.png' , ' FreeBSD' ,11, 'profy' , '' ], [40, 'user_home.png' , ' ' ,20, 'filials' , ' ' ], [50, 'user_home.png' , ' ' ,120, 'publicusers' , '' ], [60, 'user_home.png' , ' ' ,99, 'publicusers' , ' , ' ] ]; * This source code was highlighted with Source Code Highlighter .

1. var _user_groups = [ [0, 'user_home.png' , ' ' ,2, 'system' , ' ' ], [10, 'user_home.png' , ' ' ,10, 'profy' , '' ], [20, 'user_home.png' , ' iPhone/iTouch' ,22, 'profy' , '' ], [30, 'user_home.png' , ' FreeBSD' ,11, 'profy' , '' ], [40, 'user_home.png' , ' ' ,20, 'filials' , ' ' ], [50, 'user_home.png' , ' ' ,120, 'publicusers' , '' ], [60, 'user_home.png' , ' ' ,99, 'publicusers' , ' , ' ] ]; * This source code was highlighted with Source Code Highlighter .
   
   
   
   
2. var _user_groups = [ [0, 'user_home.png' , ' ' ,2, 'system' , ' ' ], [10, 'user_home.png' , ' ' ,10, 'profy' , '' ], [20, 'user_home.png' , ' iPhone/iTouch' ,22, 'profy' , '' ], [30, 'user_home.png' , ' FreeBSD' ,11, 'profy' , '' ], [40, 'user_home.png' , ' ' ,20, 'filials' , ' ' ], [50, 'user_home.png' , ' ' ,120, 'publicusers' , '' ], [60, 'user_home.png' , ' ' ,99, 'publicusers' , ' , ' ] ]; * This source code was highlighted with Source Code Highlighter .
   
   
   
   
3. var _user_groups = [ [0, 'user_home.png' , ' ' ,2, 'system' , ' ' ], [10, 'user_home.png' , ' ' ,10, 'profy' , '' ], [20, 'user_home.png' , ' iPhone/iTouch' ,22, 'profy' , '' ], [30, 'user_home.png' , ' FreeBSD' ,11, 'profy' , '' ], [40, 'user_home.png' , ' ' ,20, 'filials' , ' ' ], [50, 'user_home.png' , ' ' ,120, 'publicusers' , '' ], [60, 'user_home.png' , ' ' ,99, 'publicusers' , ' , ' ] ]; * This source code was highlighted with Source Code Highlighter .
   
   
   
   
4. var _user_groups = [ [0, 'user_home.png' , ' ' ,2, 'system' , ' ' ], [10, 'user_home.png' , ' ' ,10, 'profy' , '' ], [20, 'user_home.png' , ' iPhone/iTouch' ,22, 'profy' , '' ], [30, 'user_home.png' , ' FreeBSD' ,11, 'profy' , '' ], [40, 'user_home.png' , ' ' ,20, 'filials' , ' ' ], [50, 'user_home.png' , ' ' ,120, 'publicusers' , '' ], [60, 'user_home.png' , ' ' ,99, 'publicusers' , ' , ' ] ]; * This source code was highlighted with Source Code Highlighter .
   
   
   
   
5. var _user_groups = [ [0, 'user_home.png' , ' ' ,2, 'system' , ' ' ], [10, 'user_home.png' , ' ' ,10, 'profy' , '' ], [20, 'user_home.png' , ' iPhone/iTouch' ,22, 'profy' , '' ], [30, 'user_home.png' , ' FreeBSD' ,11, 'profy' , '' ], [40, 'user_home.png' , ' ' ,20, 'filials' , ' ' ], [50, 'user_home.png' , ' ' ,120, 'publicusers' , '' ], [60, 'user_home.png' , ' ' ,99, 'publicusers' , ' , ' ] ]; * This source code was highlighted with Source Code Highlighter .
   
   
   
   
6. var _user_groups = [ [0, 'user_home.png' , ' ' ,2, 'system' , ' ' ], [10, 'user_home.png' , ' ' ,10, 'profy' , '' ], [20, 'user_home.png' , ' iPhone/iTouch' ,22, 'profy' , '' ], [30, 'user_home.png' , ' FreeBSD' ,11, 'profy' , '' ], [40, 'user_home.png' , ' ' ,20, 'filials' , ' ' ], [50, 'user_home.png' , ' ' ,120, 'publicusers' , '' ], [60, 'user_home.png' , ' ' ,99, 'publicusers' , ' , ' ] ]; * This source code was highlighted with Source Code Highlighter .
   
   
   
   
7. var _user_groups = [ [0, 'user_home.png' , ' ' ,2, 'system' , ' ' ], [10, 'user_home.png' , ' ' ,10, 'profy' , '' ], [20, 'user_home.png' , ' iPhone/iTouch' ,22, 'profy' , '' ], [30, 'user_home.png' , ' FreeBSD' ,11, 'profy' , '' ], [40, 'user_home.png' , ' ' ,20, 'filials' , ' ' ], [50, 'user_home.png' , ' ' ,120, 'publicusers' , '' ], [60, 'user_home.png' , ' ' ,99, 'publicusers' , ' , ' ] ]; * This source code was highlighted with Source Code Highlighter .
   
   
   
   
8. var _user_groups = [ [0, 'user_home.png' , ' ' ,2, 'system' , ' ' ], [10, 'user_home.png' , ' ' ,10, 'profy' , '' ], [20, 'user_home.png' , ' iPhone/iTouch' ,22, 'profy' , '' ], [30, 'user_home.png' , ' FreeBSD' ,11, 'profy' , '' ], [40, 'user_home.png' , ' ' ,20, 'filials' , ' ' ], [50, 'user_home.png' , ' ' ,120, 'publicusers' , '' ], [60, 'user_home.png' , ' ' ,99, 'publicusers' , ' , ' ] ]; * This source code was highlighted with Source Code Highlighter .
   
   
   
   
9. var _user_groups = [ [0, 'user_home.png' , ' ' ,2, 'system' , ' ' ], [10, 'user_home.png' , ' ' ,10, 'profy' , '' ], [20, 'user_home.png' , ' iPhone/iTouch' ,22, 'profy' , '' ], [30, 'user_home.png' , ' FreeBSD' ,11, 'profy' , '' ], [40, 'user_home.png' , ' ' ,20, 'filials' , ' ' ], [50, 'user_home.png' , ' ' ,120, 'publicusers' , '' ], [60, 'user_home.png' , ' ' ,99, 'publicusers' , ' , ' ] ]; * This source code was highlighted with Source Code Highlighter .
   
   
   
   
10. var _user_groups = [ [0, 'user_home.png' , ' ' ,2, 'system' , ' ' ], [10, 'user_home.png' , ' ' ,10, 'profy' , '' ], [20, 'user_home.png' , ' iPhone/iTouch' ,22, 'profy' , '' ], [30, 'user_home.png' , ' FreeBSD' ,11, 'profy' , '' ], [40, 'user_home.png' , ' ' ,20, 'filials' , ' ' ], [50, 'user_home.png' , ' ' ,120, 'publicusers' , '' ], [60, 'user_home.png' , ' ' ,99, 'publicusers' , ' , ' ] ]; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
11. var _user_groups = [ [0, 'user_home.png' , ' ' ,2, 'system' , ' ' ], [10, 'user_home.png' , ' ' ,10, 'profy' , '' ], [20, 'user_home.png' , ' iPhone/iTouch' ,22, 'profy' , '' ], [30, 'user_home.png' , ' FreeBSD' ,11, 'profy' , '' ], [40, 'user_home.png' , ' ' ,20, 'filials' , ' ' ], [50, 'user_home.png' , ' ' ,120, 'publicusers' , '' ], [60, 'user_home.png' , ' ' ,99, 'publicusers' , ' , ' ] ]; * This source code was highlighted with Source Code Highlighter .
    
    
    
    
12. var _user_groups = [ [0, 'user_home.png' , ' ' ,2, 'system' , ' ' ], [10, 'user_home.png' , ' ' ,10, 'profy' , '' ], [20, 'user_home.png' , ' iPhone/iTouch' ,22, 'profy' , '' ], [30, 'user_home.png' , ' FreeBSD' ,11, 'profy' , '' ], [40, 'user_home.png' , ' ' ,20, 'filials' , ' ' ], [50, 'user_home.png' , ' ' ,120, 'publicusers' , '' ], [60, 'user_home.png' , ' ' ,99, 'publicusers' , ' , ' ] ]; * This source code was highlighted with Source Code Highlighter .
    
    
    
    

var _user_groups = [ [0, 'user_home.png' , ' ' ,2, 'system' , ' ' ], [10, 'user_home.png' , ' ' ,10, 'profy' , '' ], [20, 'user_home.png' , ' iPhone/iTouch' ,22, 'profy' , '' ], [30, 'user_home.png' , ' FreeBSD' ,11, 'profy' , '' ], [40, 'user_home.png' , ' ' ,20, 'filials' , ' ' ], [50, 'user_home.png' , ' ' ,120, 'publicusers' , '' ], [60, 'user_home.png' , ' ' ,99, 'publicusers' , ' , ' ] ]; * This source code was highlighted with Source Code Highlighter .

これが、ストア準備コードの外観です。 グループコードをグループ化のフィールドとして設定し、サービス配列から残りのデータを取得します。 残念ながら、グループ化フィールドの操作にはいくつかの困難があります。各行をレンダリングするとき、スクリプトはグループヘッダーを書き換えるため、毎回書き換える必要があります。 グループヘッダーを標準化するメカニズムはありますが、例にもかかわらず、何も機能しなかったため、ヘッダーレンダリング関数を手動で再定義しました。 グループ化は、並べ替えた同じフィールドに対してのみ可能であることに注意してください。

1. var _usergroup_store = new Ext.data.GroupingStore（{
2. リーダー： 新しい Ext.data.ArrayReader（{}、
3. [{
4. 名前： 'id' 、
5. タイプ： 'int'
6. }、{
7. 名前： 'group_icon' 、
8. タイプ： 'string'
9. }、{
10. 名前： 'group_name' 、
11. タイプ： 'string'
12. }、{
13. 名前： 'count_users' 、
14. タイプ： 'string'
15. }、{
16. id： 'group_type' 、
17. 名前： 'group_type' 、
18. タイプ： 'string'
19. }、{
20. 名前： 'group_desc' 、
21. タイプ： 'string'
22. }]）、
23. データ：_user_groups、
24. sortInfo：{
25. フィールド： 'group_type' 、
26. 方向： 「ASC」
27. }、
28. groupField： 'group_type' 、
29. groupOnSort： true
30. }）;

*このソースコードは、 ソースコードハイライターで強調表示されました。

グループデータの追加ソースも必要になります。 オブジェクトとして実装しました。グループコードを使用して、説明、アイコン、その他のデータを取得できます。 もちろん、これはすべて元のデータ配列に含めることができますが、同じデータが他の場所で使用されるため、別々に取り出されます。

1. var _user_groups_cats = {
2. システム：{
3. アイコン： 'user_home.png' 、
4. title： 'システムグループ' 、
5. desc： 「Wheemplay Ltd.のスタッフ限定サービスグル​​ープ」 、
6. isClosed： true 、
7. isPrivate： false
8. }、
9. profy：{
10. アイコン： 'user_star.png' 、
11. タイトル： 'プロフェッショナルグループ' 、
12. desc： 「インタレストグループ」 、
13. isClosed： false 、
14. isPrivate： false
15. }、
16. 親子：{
17. アイコン： 'user_earth.png' 、
18. title： 'ブランチグループ' 、
19. desc： 「プライベートブランチグループ」 、
20. isClosed： false 、
21. isPrivate： true
22. }、
23. publicusers：{
24. アイコン： 'group.png' 、
25. title： '一般ユーザー' 、
26. desc： 「誰でも入力できるパブリックグループ」 、
27. isClosed： false 、
28. isPrivate： false
29. }、
30. 私：{
31. アイコン： 'user_comment.png' 、
32. title： '<strong>自分のグループ</ strong>' 、
33. desc： '私のグループ（あなたはメンバーです）' 、
34. isClosed： true 、
35. isPrivate： true
36. }
37. }

*このソースコードは、 ソースコードハイライターで強調表示されました。

通常のグループ設定に加えて、グループがプライベートであるかプライベートであるかという2つの追加設定があります。 他の任意のパラメーターを使用できます。 これらは、パラメーターに基づいて各グループに必要なアイコンとアクションを表示するために使用されます。 つまり、グループが閉じている場合、アクション「グループに参加」などのアイコンを表示する必要はありません。



さらに、現在のユーザーがメンバーとなっているグループのコードを配列に保存します。

  var _i_in_group = [0、30、60]; 

これで、リストをレンダリングするためのすべてのデータができました。 これを行うには、Ext.grid.GridPanelコンポーネントを使用しますが、その機能はもちろんこのような例では少し冗長です。 ListViewのようなものを使用する方が良いでしょう。おそらく次の記事では、すべてをリメイクすることを試みますが、今はグリッドを試してみます。 そうでなければ、グループ化の独立した実装を考え出す必要があり、将来の拡張が問題になります。 したがって、ケースを個人的に検討する必要があります。グリッドのすべての機能が必要でない場合は、軽量で高速なListViewを使用してみてください。ただし、さらに多くの手作業が必要になります。



そのため、以前に作成したExt.data.GroupingStore （_usergroup_store）を使用するデータソースとして、 Ext.grid.GridPanelコンポーネントを作成します。 主な機能は、列とそのレンダリングの説明に集中しています。これについては、後で詳しく説明します。 最初に、レンダラーのない列の説明を示します（レンダラーまたはレンダラーは、セル内の値として表示される任意のテキストまたはhtmlコードを返す特別なメソッドです）。

1. 列：[{
2. id： 'group_name' 、
3. ヘッダー： 「<strong>グループ</ strong>」 、
4. ソート可能： false 、
5. 幅：150、
6. dataIndex： 'group_name'
7. }、{
8. ヘッダー： 「メンバー」 、
9. 幅：35、
10. 非表示： false 、
11. ソート可能： true 、
12. dataIndex： 'count_users'
13. }、{
14. ヘッダー： 「アクション」 、
15. 幅：60、
16. 非表示： false 、
17. ソート可能： false 、
18. dataIndex： 'count_users'
19. }、{
20. id： 'group_type' 、
21. dataIndex： 'group_type' 、
22. 非表示： true 、
23. グループ化可能： true
24. }]

*このソースコードは、 ソースコードハイライターで強調表示されました。

ご覧のように、グループ化は最後のフィールド（ストア内の同じ列のデータを使用するgroup_type列）に従って行われます（列IDがdataIndexと一致するため、通常は同じ列名を使用します）。 ただし、この列を表示する必要はありません。グループ化のための純粋なユーティリティなので、hidden：trueパラメータを設定し、このフィールドでグループ化することを示します-groupable：true。



列ごとにレンダラーとレンダーグループの2種類のレンダラーがあります。 最初はセル内のデータの表示を担当し、2番目はグループヘッダーの表示に使用されます。 ここに1つの重大な困難があります（明らかに、これは開発者による奇妙なアーキテクチャ上の決定にすぎません）。 グループヘッダーはこの要素のスタイル名として使用されます。たとえば、htmlコードを追加してグループのレンダリングを再定義すると、このテキストはすべてグループスタイル識別子に送られます。 以下は、この点を説明するためのFirebugのスクリーンショットです。 また、グループ化メカニズムを完全に理解していなかったことも十分に認めているので、追加または修正していただけるとありがたいです。











各列の出力について説明します。 グループの名前の前に、1つまたは2つのアイコンを付けることができます。 緑色の点は、グループが開いているかどうかを示します-グループが存在する場合、グループは公開されているか、プライベートまたはクローズされている場合、別のアイコンが表示されます。 独自のグループ属性を使用して、他の情報を表示できます。 各アイコンには独自のツールチップがあり、マークアップによって追加されます（多くの場合、より便利です）。

1. レンダラー： 関数 （obj、x、y）
2. {
3. var src = '<span style = "cursor：pointer;">' ;
4. //簡素化する
5. var tmp = _user_groups_cats [y.data.group_type];
7. if （tmp.isClosed == true ）
8. {
9. src = src +
10. '<img src = "/ images / icons / bullet_error.png" alt = "" align = "absmiddle" />' ;
11. }
13. if （tmp.isPrivate == true ）
14. {
15. src = src +
16. '<img src = "/ images / icons / bullet_key.png" alt = "" align = "absmiddle" />' ;
17. }
19. if （（tmp.isClosed == false ）&&（tmp.isPrivate == false ））
20. {
21. src = src +
22. '<img src = "/ images / icons / bullet_green.png" alt = "" align = "absmiddle" />' ;
23. }
25. //結果を必ず返す
26. return src + '' + obj + '</ span>' ;
27. }

*このソースコードは、 ソースコードハイライターで強調表示されました。

レンダラーの詳細と設定方法については、 公式ドキュメントをご覧ください。 さまざまなデータがメソッドに転送されます。初期値（最初のパラメーター）、値がレンダリングされるhtmlオブジェクトに関するmatデータ、および現在のレコードのオブジェクト（3番目のパラメーター）のみに関心があります。



2番目の列は、各グループの参加者の数です。 ただし、グループがプライベートの場合、このデータを非表示にする必要があるため、レンダリングでグループのタイプを確認し、必要な値を表示します。

1. レンダラー： 関数 （obj、x、y）
2. {
3. if （_user_groups_cats [y.data.group_type] .isPrivate == false ）
4. {
5. obj + 'private'を 返し ます ;
6. }
7. 他に
8. return '<em> is hidden </ em>' ;
9. }

*このソースコードは、 ソースコードハイライターで強調表示されました。

最も興味深いのは3番目と最後の列です。ユーザーアクションのボタンアイコンが表示されますが、そのセットはグループのパラメーターに依存します。 確かに 、ユーザー拡張機能、 RowActionsおよびCellActionsがありますが、今日は同じことを手動で行います（正直なところ、最初にこれらの拡張機能を見つけたので、完成したコードをやり直しませんでした）。

1. レンダラー： 関数 （obj、x、y）
2. {
3. var src = '' ;
4. var tmp = _user_groups_cats [y.data.group_type];
6. src = src + '<img style = "カーソル：ポインター;" ' +
7. 'src = "/ images / icons / vcard.png" alt = "" align = "absmiddle" />' ;
9. //グループがプライベートではなく、ユーザーがそのメンバーではない場合
10. if （（tmp.isPrivate == false ）&&（_i_in_group.indexOf（y.data.id）== -1））
11. {
12. src = src + '<img style = "カーソル：ポインター;" ' +
13. 'src = "/ images / icons / user_add.png" alt = "" align = "absmiddle" />' ;
14. }
16. if （（tmp.isPrivate == false ）&&（tmp.isClosed == false ））
17. {
18. src = src + '<img style = "カーソル：ポインター;" ' +
19. 'src = "/ images / icons / group.png" alt = "" align = "absmiddle" />' ;
20. }
22. //ユーザーがグループに属しているかどうかを確認します
23. if （_i_in_group.indexOf（y.data.id）！= -1）
24. {
25. src = src + '<img style = "カーソル：ポインター;" ' +
26. 'src = "/ images / icons / user_delete.png" alt = "" align = "absmiddle" />' +
27. '<img style = "cursor：pointer;" src = "/ images / icons / comments.png" alt = "" align = "absmiddle" /> ' ;
28. }
30. return src;
31. }

*このソースコードは、 ソースコードハイライターで強調表示されました。

次に、グループ化のための非表示列があります。 彼女のために、グループのレンダリングを再定義して、美しいタイトルを表示します。 レンダーは1つの値を取得します。グループ化の条件として宣言されているフィールドは、この場合はグループコードであり、それによって残りのすべての情報を取得します。

1. groupRenderer： 関数 （グループ）
2. {
3. return '<span> <img src = "/ images / icons /' + _user_groups_cats [group] .icon +
4. '"alt =" "align =" absmiddle "/>' + _user_groups_cats [グループ] .title +
5. '</ span>' ;
6. }

*このソースコードは、 ソースコードハイライターで強調表示されました。

最後の仕上げがあります。テーブルに必要なビュー、この場合はGroupingViewを指定する必要があります。

1. ビュー： 新しい Ext.grid.GroupingView（{
2. forceFit： true 、
3. enableNoGroups： false 、
4. autoFill： true 、
5. scrollOffset：0、
6. showGroupName： false 、
7. groupTextTpl： '{text}'
8. }）

*このソースコードは、 ソースコードハイライターで強調表示されました。

グループのない行は存在できないことを指摘し、グループのレンダリングを再定義したため、グループの名前を表示することも禁止しました。 groupTextTpl-ここでは、グループの名前を表示するためのテンプレートを指定しますが、テンプレート内のグローバル値の条件と処理を記述するのは非常に難しいため、テンプレートには困難があります。 したがって、レンダリング関数が返したものを出力するだけで、処理は一切行われません。



それだけです。その結果、美しいグループ化されたリストが得られます。 カスタムアクションを実装するには、アイコンにハンドラーを掛ける必要がありますが、これは自分で処理できると思います。 また、この例ではテーブルヘッダーが意図的に非表示になっていますが、（グリッド構成を介して）有効にすると、ヘッダーをクリックして（ソート可能と宣言された列で）データを並べ替えることができます。 この場合、グループ化は保存されます。つまり、各グループ内のデータは個別にソートされます。



結論として、別のスクリーンショット、2番目のリストを表示します。このリストには、すべてのユーザーと、会社名やWebサイトへのリンクなどの追加データが表示されます。 これは、上記の例を少し改良したものであるため、自分で実験することができます。