列表組件：如何檢測選擇了哪個項目？

Question

我可以在控制器中訪問列表（作為項的容器），但是我不知道如何訪問列表項的屬性。

如何創建正確的ComponentQuery規則？ 我嘗試了“列表>項目”，但是它不起作用。

每個項目都有其標題，但在selectSection中輸出為“ undefined”。

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事件，該事件通常是用於檢測列表項上的點擊事件的事件。

希望這可以幫助