列表组件：如何检测选择了哪个项目？

Question

我可以在控制器中访问列表（作为项目的容器），但我不知道如何访问列表项属性。

如何创建正确的ComponentQuery规则？我试过＆＃39; list＆gt;项目＆＃39;但它不起作用。

每个项目都有它的标题，但我得到了“未定义的”＃39;作为selectSection中的输出。

Ext.define( 'UGP.controller.BeginList',
            {               
                extend: 'Ext.app.Controller',
                config:
                {
                    views: [ 'BeginList' ],
                    control:
                    {
                        'list':
                        {
                            select: 'selectSection'
                        }
                    }
                },

                selectSection: function()
                {
                    Ext.Msg.alert( 'title=' + this.title );
                }
            }
);

带有列表组件的BeginList.js：

Ext.define( 'UGP.view.BeginList',
            {
                extend: 'Ext.List',

                config:
                {
                    fullscreen: true,
                    itemTpl: '{title}',
                    data: 
                    [
                        { title: 'Chapter 1', id: 0, action: "selectSection" },
                        { title: 'Chapter 2', id: 1, action: "selectSection" },
                        { title: 'Chapter 3', id: 2, action: "selectSection" },
                        { title: 'Chapter 4', id: 3, action: "selectSection" }
                    ]
                }
            }
);

Answer 1

您可以在select事件文档中看到它传递了参数。因此，您可以将selectSection函数的签名更改为：

selectSection: function (list, record) {
  Ext.Msg.alert( 'title=' + record.get( 'title' ) );
}

您还可以查看itemTap事件，该事件通常用于检测列表项上的点击事件。

希望这有帮助