添加标题栏时未执行列表选择

Question

我有一个列表，我在列表项选择上打开一个详细面板。这工作得很好，直到我试图添加一个标题栏到这个列表(只改变视图，而不是控制器)。现在选择没有执行，我不明白为什么。

下面是带有列表的视图:

    Ext.define('Nutribase.view.ProductsOverview', {
    extend: 'Ext.dataview.List',
    alias: 'widget.productsoverview',
    requires: [
        'Ext.XTemplate'
    ],
    config: {
        layout: { type: 'fit' },
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'Produktliste'
            },
            {
                xtype: 'list',
                itemId: 'products',
                store: 'ProductsStore',
                grouped: true,
                itemTpl: [
                    '<div>{type} {type_ext}</div>'
                ],
            },
        ]
});

这里是控制器:

    Ext.define('Nutribase.controller.SelectionController', {
    extend: 'Ext.app.Controller',
    config: {
        models: [
            'ProductEntry'
        ],
        stores: [
            'ProductsStore'
        ],
        refs: {
            ProductsOverview: 'productsoverview',
            ProductDetails: 'productdetails',
            Products: 'productslist',
        },
        control: {
            Products: {
                select: 'onProductsOverviewSelect'
            },
            ProductDetails: {
                backToListCommand: 'onBackToListCommand'
            }
        }
    },
    // Transitions
    getSlideLeftTransition: function () {
        return { type: 'slide', direction: 'left' };
    },
    getSlideRightTransition: function () {
        return { type: 'slide', direction: 'right' };
    },
    onProductsOverviewSelect: function (dataview, record, eOpts) {
        var productDetails = this.getProductDetails();
        productDetails.setRecord(record);
        console.log(record.data);
        Ext.Viewport.animateActiveItem(productDetails, { type: 'slide', direction: 'left' });
    },
    onBackToListCommand: function () {
        console.log('onBackToListCommand');
        Ext.Viewport.animateActiveItem(this.getProductsOverview(), this.getSlideRightTransition());
    },
    launch: function () {
        this.callParent(arguments);
        console.log('launchSelectionController');
    },
    init: function () {
        this.callParent(arguments);
        console.log('initSelectionController');
    }
});

当我点击其中一个列表项时，什么也没有发生

Answer 1

添加以下行，xtype: 'list'，:

id: 'myList',

和refs下的控制器，写:

mylist: '#myList'

在控制下，写:

myList: {
    select: 'functionToCall'
}

写函数体