ExtJS4 dataView - 选择节点 ID答案

【问题标题】：ExtJS4 dataView - Select node idExtJS4 dataView - 选择节点 ID
【发布时间】：2013-12-09 10:54:07
【问题描述】：

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

我是第一次使用dataView，所以有些麻烦。

商店已正确加载，我很好地看到了视图中的数据。我遇到的问题涉及更新和删除的“经典”操作，特别是获取所选项目的 id。例如进入一个网格，我单击，然后选择一条记录，然后通过按下按钮打开一个带有加载表单的窗口（或其他操作）（通过将 AJAX 发送到商店，选定行的 id）并更新数据。

我仍然无法使用 ExtJS 4 数据视图。

在我的数据视图下方：

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) { 中，节点变量不假定任何值，我不知道如何将参数从数据视图传递给处理函数。

希望有人能帮助我。

【问题讨论】：

标签： ajax extjs extjs4 extjs4.2 extjs-mvc

【解决方案1】：

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

不做进一步测试，我认为应该是这样的：

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

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

【讨论】：

非常感谢！它工作正常，但我怎样才能在按钮的处理函数上获得相同的东西？ (handler: function(nodes) {)
对不起，显然我错过了你的第二个问题。您需要直接从选择模型中获取。请参阅 Akatums 的答案，他的示例代码应该可以解决问题。
别担心@Matt！非常感谢两位！您的解决方案完美运行！ :) :)

【解决方案2】：

问题第二部分的答案：

在按钮处理程序中，您需要获取视图的选择模型并从中获取有关所选记录的信息：

handler: function(nodes) {
     // find view component
     var view = dataView_player.down('dataview');

     // get all selected records
     var records = view.getSelectionModel().getSelection();

     // process selected records         
     for(var i = 0; i < records.length; i++) {
         console.log(records[i].getId());
     }
}

【讨论】：