ExtJSに：データビューitemSelectorは、私は次のような階層データをレンダリングするためにデータビューを使用したい子要素

Question

を指す：

[{ 
    id: 1, 
    name: 'Parent #1', 
    children: [ { id: 11, name: 'Child 1.1' }, { id: 12, name: 'Child 1.2' }] 
}, 
{ 
    id: 1, 
    name: 'Parent #1', 
    children: [ { id: 21, name: 'Child 2.1' }, { id: 22, name: 'Child 2.2' }] 
}] 

の形で：

：

Parent #1 <- div with class = x-title 
Child 1.1 <- div with class = x-list-item 
Child 1.2 
Parent #2 
Child 2.1 
Child 2.2 

私のデータビューはTPLこのように構成されました

... 
    trackOver: true, 
    tpl: new Ext.XTemplate( 
    '<tpl for=".">', 
'<div class="x-title">{name}</div>', 
    '<tpl for="children">', 
    '<div class="x-list-item">{name}</div>', 
    '</tpl>', 
'</tpl>' 
), 
    ... 

ここでは問題です：

1. itemSelector： 'x-list-item'が動作しません。未定義の 'internalId'プロパティを読み取ることができません。
2. itemSelector： 'x-title' work！

ルートレベルではなく子要素を指すitemSelectorをサポートすることは可能でしょうか？

Answer 1

DataViewを少し拡張した後に可能です。

例コード：

Ext.create('Ext.Panel', { 
    id: 'images-view', 
    frame: true, 
    collapsible: true, 
    width: 535, 
    renderTo: 'dataview-example', 
    title: 'Simple DataView (0 items selected)', 
    items: Ext.create('Ext.view.View', { 
     store: store, 
     tpl: new Ext.XTemplate( 
      '<tpl for=".">', 
       '<div class="x-item x-title">{name}</div>', 
       '<tpl for="children">', 
        '<div class="x-item x-item-child">{name}</div>', 
       '</tpl>', 
      '</tpl>' 
     ), 
     multiSelect: true, 
     height: 310, 
     trackOver: true, 
     overItemCls: 'x-item-over', 
     itemSelector: '.x-item', 
     emptyText: 'No images to display', 

     onItemSelect: function(record) { 
      var node = this._selectedNode; //this.getNode(record); 

      if (node) { 
       Ext.fly(node).addCls(this.selectedItemCls); 
      } 
     }, 

     onItemDeselect: function(record) { 
      var node = this._deselectedNode; //this.getNode(record); 

      if (node) { 
       Ext.fly(node).removeCls(this.selectedItemCls); 
      } 
     }, 

     processItemEvent: function(record, item, index, e) { 
      if (e.type == "mousedown" && e.button == 0) { 
       this._deselectedNode = this._selectedNode; 
       this._selectedNode = item; 
       console.log(item.innerHTML); 
      } 
     }, 

     updateIndexes : function(startIndex, endIndex) { 
      var ns = this.all.elements, 
       records = this.store.getRange(), 
       i, j; 

      startIndex = startIndex || 0; 
      endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1)); 
      for(i = startIndex, j = startIndex - 1; i <= endIndex; i++){ 
       if (!Ext.fly(ns[i]).is('.x-item-child')) { 
        j++; 
       } 

       ns[i].viewIndex = i; 

       ns[i].viewRecordId = records[j].internalId; 
       if (!ns[i].boundView) { 
        ns[i].boundView = this.id; 
       } 
      } 
     } 
    }) 
}); 

ワーキングサンプル：http://jsfiddle.net/fU9De/

しかし、それは唯一の子供たちがレコードを分離してそのようにデータのレイアウトを変更することにより、DataViewを変更せずに実現するのは簡単です。たとえば：

[ 
    { 
     id: 1, 
     name: 'Parent #1', 
     children: [ 11, 12 ] 
    }, 
    { id: 11, name: 'Child 1.1', parentId: 1 }, 
    { id: 12, name: 'Child 1.2', parentId: 1 }, 
    { 
     id: 2, 
     name: 'Parent #2', 
     children: [ 21, 22 ] 
    }, 
    { id: 21, name: 'Child 2.1', parentId: 2 }, 
    { id: 22, name: 'Child 2.2', parentId: 2 } 
] 

次に、あなたがにテンプレートを変更することができます。

new Ext.XTemplate( 
    '<tpl for=".">', 
     '<div class="x-item x-title {[!!values.parentId ? "x-item-child" : "x-item-parent"]}">{name}</div>', 
    '</tpl>' 
), 

、あなたはアウト・オブ・ボックスの選択を働いています。