Question

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

这是我第一次使用 dataView ，然而，有一些麻烦。

正确加载商店，我非常清楚地看到数据进入视图。我遇到的问题涉及更新和删除的“经典”操作，特别是获取所选项目的ID。例如进入网格我点击，然后选择一个记录，然后通过按钮按下我打开一个窗口（或其他动作）与加载的表格（通过AJAX发送到商店，所选行的ID），我更新DATAS。

我仍无法使用 ExtJS 4 dataView 进行此操作。

在我的dataView下面：

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变量不承担任何值，我不知道如何将params从dataview传递给处理函数。

我希望有人能够帮助我。

Answer 1

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

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

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

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

Answer 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());
     }
}

ExtJS4 dataView - 选择节点ID

2 个答案: