javascript - 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:

1. 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.

2. 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;
        },
        }
    })
});

Answer 1

你在滥用alias财产。此属性应在定义类本身时使用，而不是在定义实例时。在此处查看此属性的文档：http ://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Class-cfg-alias

您正在寻找的是itemId. 如果你设置了itemId一个组件实例，你可以在你的控制器中使用#你的选择器来引用它：

例如

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

然后：

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

另一种选择是通过xtype. 请注意，这将控制该 xtype 的任何组件，但是：

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