ajaxextjsextjs4extjs4.2extjs-mvc

ExtJS4 dataView - Select node id


I have an ExtJS 4 dataView and i would like to catch the id of a selected node.

It is the first time that i'm using the dataView, then, there are some troubles.

The store is loaded correctly and i see the datas into the view very well. The problem which i'm having, concern the "classic" actions of update and delete, particularly getting the id of a selected item. For example into a grid i click, then select a record and through a button's pressing i open a window (or other actions) with a loaded form (by sending in AJAX to the store, the id of the selected row) and i update the datas.

I'm not still able to do it with the ExtJS 4 dataView.

Below my 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);
                        }
                    }
                }
            ]
        }]
    });

Of course, this is a wrong example (because the listeners don't work) but it's just to make an idea. There are two main things what i would like to do:

1) Catch the id (and other store's fields) of the selected item on the action "selectionchange". Obviously, now it doesn't work because of this: node.get('id'). Of course it's a wrong syntax but make up the idea of my will.

2) Catch the id of the selected item on the handler event of the "update-player" button. As above, the issue is the nodes.get('id'). Further trouble, is how to pass the selected item's features. in handler: function(nodes) { the nodes variable does not assume any value and i don't know how to pass the params from the dataview to the handler function.

I hope that somebody will able to help me.


Solution

  • Answer for second part of the question:

    In button handler, you need to get selection model of the view and from it get information about selected records:

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