アコーディオンに子パネルを挿入/追加する必要があります。これらの各子パネルには、データの「フィールド」値を使用してタイトルを付ける必要があり (以下を参照)、各子パネルのコンテンツは、クリック可能である限り (ラベルまたは表示フィールドまたは ??) にする必要があります。サーバーからのjsonデータは次のとおりです。
data: [{
'field': 'cities',
'values': [{
'value': 'DC',
'count': 5
}, {
'value': 'SF',
'count': 2
}, {
'value': 'NYC',
'count': 4
}, {
'value': 'Nashville',
'count': 4
}]
}, {
'field': 'beaches',
'values': [{
'value': 'obx',
'count': 1
}, {
'value': 'ocean city',
'count': 2
}, {
'value': 'myrtle',
'count': 4
}]
}, {
'field': 'planets',
'values': [{
'value': 'mercury',
'count': 1
}, {
'value': 'venus',
'count': 2
}, {
'value': 'earth',
'count': 4
}, {
'value': 'mars',
'count': 1
}, {
'value': 'jupiter',
'count': 2
}, {
'value': 'uranus',
'count': 4
}, {
'value': 'neptune',
'count': 1
}]
}]
レンダリングが機能します!! :)
しかし、機能するクリック イベントを取得する方法はありません。最終的に、クリック リスナーは、選択した値 + 'フィールド' 値へのアクセスを許可する必要があります。(たとえば、「惑星」、「木星」)。
これは簡単なはずですが、うまくいきません。最初は for ループをネストしてその場でコンポーネントを作成しようとしましたが、動作するクリック ハンドラーを追加できませんでした (おそらく b/c ストア ロード ハンドラー関数内で作業を行っているのでしょうか?)。パネル内でデータビューも試しました (配列だけを渡します) が、itemSelector がトリガーされません。コードに基づいて「div.facet」、「div.facet_item」(およびその他のいくつかなど) を試しましたが、うまくいきませんでした。私のコントローラの this.control():
'panel[itemId=pnlFacets] > panel > dataview': {
itemclick: me.facetSelect
}
およびデータビュー試行の tpl:
var tplFacet = new Ext.XTemplate(
'<tpl for=".">',
'<div class="facet">',
//ignore - (this is handled in title of panel) '<label class="facet_field">{facetName}</label>',
'<tpl for="facetEntries">',
'<div class="facet_item">{value} ({count})</div>',
'</tpl>',
'</div>',
'</tpl>'
);