ExtJS DataView自定义和事件

Question

我在这里有关于ExtJS的DataView示例的几个问题:

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

以下是我的问题:

1. 我有一个自定义组件扩展面板,并做一些布局和东西,以适应我的应用程序.我想使用数据视图在垂直列表视图中呈现此组件的许多实例,就像这个例子一样.我正在与MVC合作并拥有一个模型和商店.

2. 该示例侦听视图中的selectionchange事件.由于我遵循ExtJS MVC模式,我希望在控制器中有一个侦听器.但是,我无法做到这一点.我尝试过这样的事情(假设动作:'picturesListView'用于示例中的Ext.view.View):

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

但这不起作用.

根据要求发布类代码:

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