extjs4 - ExtJS : dataview itemSelector pointing to child element

Question

我想使用 dataview 来呈现以下层次结构数据:

[{
  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

我的 dataview 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>'
  ),
  ...

这是问题所在:

itemSelector:“x-list-item”不起作用无法读取未定义的属性“internalId”

itemSelector: 'x-title' 工作!

我想知道是否有可能支持 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>'
),

您将拥有开箱即用的工作选择。