ExtJS DataView customization and events

Question

I've got a couple of questions regarding the DataView sample from ExtJS available here:

http://dev.sencha.com/deploy/ext-4.0.0/examples/view/data-view.html

Here are the questions that I have:

I have got a custom component that extends panel and does some layout and things to suit my application. I want to use data view to render many instances of this component in a vertical list view much like this example. I am working with MVC and have a model and store.
The example listens to selectionchange event in the view. Since I am following ExtJS MVC pattern, I would like to have a listener for this event in the controller. However, I cannot get it to do that. I have tried something like this (assuming action: 'picturesListView' for the Ext.view.View in the example):
```
this.control({
    'picturesListView': {
         selectionchange: function() { console.log('selectionchange'); }
     }
});
```

However this doesn't work.

Posting the class code on request:

Ext.create('Ext.Panel', {
    id: 'images-view',
    frame: true,
    collapsible: true,
    width: 535,
    renderTo: 'dataview-example',
    title: 'Simple DataView (0 items selected)',
    items: Ext.create('Ext.view.View', {
        store: store,
        tpl: [
            '<tpl for=".">',
                '<div class="thumb-wrap" id="{name}">',
                '<div class="thumb"><img src="{url}" title="{name}"></div>',
                '<span class="x-editable">{shortName}</span></div>',
            '</tpl>',
            '<div class="x-clear"></div>'
        ],
        multiSelect: true,
        height: 310,
        trackOver: true,
        overItemCls: 'x-item-over',
        itemSelector: 'div.thumb-wrap',
        emptyText: 'No images to display',
        alias: 'view.picturesListView',
        plugins: [
            Ext.create('Ext.ux.DataView.DragSelector', {}),
            Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
        ],
        prepareData: function(data) {
            Ext.apply(data, {
                shortName: Ext.util.Format.ellipsis(data.name, 15),
                sizeString: Ext.util.Format.fileSize(data.size),
                dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
            });
            return data;
        },
        }
    })
});

Can you post your code for how the picturesListView class is defined, as well as where it is instantiated? — kevhender
Edited with the code. Its just the same code as in the same but with ` alias: 'view.picturesListView'` added to the view. — GlGuru
Ok, fair enough. But given my controller event handler, I want the events or the relevant ones (selectionchange) to go to my controller. How do I achieve that? — GlGuru
For simple items like buttons etc. I used action and that worked. I tried using action: 'picturesListView' as well but that didn't work either. — GlGuru

kevhender kevhender · Accepted Answer · 2013-07-03T13:04:58

You are misusing the alias property. This property should be used when defining the class itself, not when defining an instance. Check out the docs for this property here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Class-cfg-alias

What you are looking for is itemId. If you set the itemId of an instance of a component, you can reference that in your controller using # in your selector:

e.g.

Ext.create('Ext.view.View', {
    //...other stuff here...
    itemId: 'picturesListView',
    //...other stuff here
})

Then:

this.control({
    '#picturesListView': {
        selectionchange: function() { console.log('selectionchange'); }
    }
});

Another option is to get the reference for your controller by its xtype. Be aware that this will control any component of that xtype, however:

this.control({
    'dataview': {
        selectionchange: function() { console.log('selectionchange'); }
    }
});

ExtJS DataView customization and events

1 Answers