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 变量不假设任何值，我不知道如何将参数从 dataview 传递到处理函数。

希望有人能帮助我。

Answer 1

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

在不做进一步测试的情况下，我认为应该是这样的:

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

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