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

Question

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

如何创建正确的ComponentQuery规则？我尝试了“列表 > 项目”，但它不起作用。

每个项目都有它的标题，但我在 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通常用于检测列表项上的点击事件的事件。

希望这可以帮助