ajax - ExtJS4 dataView - 选择节点 id

Question

我有一个 ExtJS 4 dataView，我想获取所选节点的 ID。

我是第一次使用dataView，然后遇到了一些麻烦。

商店加载正确，我在 View 中看到数据非常好。我遇到的问题涉及更新和删除的“经典”操作，特别是获取所选项目的 ID。例如，我点击一个网格，然后选择一条记录，然后通过按下一个按钮，我打开一个带有加载表单的窗口(或其他操作)(通过将 AJAX 发送到商店，所选行的 ID)，然后我更新数据。

我仍然无法使用 ExtJS 4 dataView 完成此操作。

在我的数据 View 下面:

dataView_player = Ext.create('Ext.Panel', {
        id: 'images-view',
        frame: true,
        collapsible: false,
        autoWidth: true,
        title: 'Giocatori (0 items selected)',
        items: [ Ext.create('Ext.view.View', {
            id:'players-view',
            store: store_player,
            multiSelect: true,
            height: 310,
            trackOver: true,
            overItemCls: 'x-item-over',
            itemSelector: 'div.thumb-wrap',
            emptyText: 'Nessun giocatore visualizzato',
            tpl: [
                '<tpl for=".">',
                  '<div class="thumb-wrap" id="{id}-{name}">',
                    '<div class="thumb">',
                      '<img src="/img/players/{picture}" title="{name} {surname}" alt="{name} {surname}" style="">',
                    '</div>',
                    '<span class="" style="height:30px;">{general_description}{name} {surname}</span>',
                  '</div>',
                '</tpl>',
                '<div class="x-clear"></div>'
            ],
            plugins: [
                Ext.create('Ext.ux.DataView.DragSelector', {}),
                Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
            ],
            prepareData: function(data) {
                Ext.apply(data, {
                    name: data.name,
                    surname: data.surname,
                    general_description: Ext.util.Format.ellipsis(data.general_description, 15)
                });
                return data;
            },
            listeners: {
                'selectionchange': function(record, item, index, e) {
                    var node = this.getNode(record); //this.getNode(record);
                    console.log(node.get('id'));
                }
            }
        }) ],
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                    iconCls: 'delete',
                    text: 'Cancella Selezionati',
                    scale: 'medium',
                    tooltip: 'Per <b>cancellare</b> i giocatori selezionati',
                    tooltipType: 'qtip',
                    id: 'delete-player',
                    disabled: true,
                    handler: delete_news
                }, '-', {
                    iconCls: 'edit',
                    text: 'Aggiorna Selezionata',
                    scale: 'medium',
                    tooltip: 'Per <b>aggiornare</b> un giocatore selezionato',
                    tooltipType: 'qtip',
                    disabled: false,
                    id: 'update-player',
                    handler: function(nodes) {
                        var l = nodes.get('id');
                        console.log(l);
                        }
                    }
                }
            ]
        }]
    });

当然，这是一个错误的例子(因为监听器不工作)但它只是一个想法。我想做两件主要的事情:

1) 在操作“selectionchange”中捕获所选项目的 ID(和其他商店的字段)。显然，现在它不起作用是因为:node.get('id')。当然这是一个错误的语法但是弥补了我的意志。

2) 在“update-player”按钮的处理程序事件中捕获所选项目的 ID。如上，问题是 nodes.get('id')。更麻烦的是如何传递所选项目的特征。在 handler: function(nodes) { 中，nodes 变量没有任何值，我不知道如何将参数从数据 View 传递到处理函数。

我希望有人能够帮助我。

Answer 1

根据文档 selectionchange事件提供了选择模型以及所选记录的数组，因此您可能在监听器中假设了错误的参数。

没有做进一步的测试，我认为它应该是这样的:

listeners: {
    'selectionchange': function(selModel, selection, eOpts) {
        var node = selection[0];
        console.log(node.get('id'));
    }
}

请注意，您正在使用 multiSelect: true，因此选择数组中可能有多个记录。