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

并编写你的函数体。

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

1 个答案: