ExtJS:指向子元素的dataview itemSelector [英] ExtJS: dataview itemSelector pointing to child element

问题描述

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

I want to use dataview to render the following hierarchy data:

[{
  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的配置如下:

My dataview tpl configured like this:

  ...
  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标题"工作！

我想知道是否完全可以支持指向子元素而不是根级别的itemSelector?

I wonder if it possible at all to support itemSelector which point to children element instead of root level?

推荐答案

在稍微扩展DataView之后是可能的.

It is possible after extending DataView a bit.

示例代码:

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就很容易实现，只需修改数据布局即可，这样子节点是分开的记录.例如:

But it's easy to achieve without modifying DataView by only changing data layout in that way children are separated records. For example:

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

然后您可以将模板更改为:

Then you can change template to:

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

开箱即用的有效选择.

这篇关于ExtJS:指向子元素的dataview itemSelector的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！