Ext JS 6 DataView 多選配置：正確使用 Ext.selection.DataViewModel 替代废棄 multiSelect

版本變更背景

Ext JS 4+ 棄用 multiSelect: true，改用 selectionModel 配置。Ext 6 中 Ext.selection.Model 為基類，**DataView 必須使用 Ext.selection.DataViewModel** 才能正常工作。

錯誤配置（導致多選失效、click 監聽失效）

// 錯誤：使用基類 Model
selectionModel: new Ext.selection.Model({
    mode: 'MULTI'
})

正確配置

selectionModel: new Ext.selection.DataViewModel({
    type: 'dataviewmodel',  // 可省略，實例化時自動設置
    mode: 'MULTI'           // 'SINGLE' | 'SIMPLE' | 'MULTI'
})

完整 DataView 示例

Ext.create('Ext.view.View', {
    renderTo: Ext.getBody(),
    store: {
        fields: ['name', 'value'],
        data: [
            {name: 'Item 1', value: 1},
            {name: 'Item 2', value: 2},
            {name: 'Item 3', value: 3}
        ]
    },
    tpl: new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="item" style="padding:5px;cursor:pointer;">{name}</div>',
        '</tpl>'
    ),
    itemSelector: 'div.item',
    selectionModel: new Ext.selection.DataViewModel({
        mode: 'MULTI'
    }),
    listeners: {
        selectionchange: function(view, selected) {
            console.log('Selected:', selected.map(r => r.get('name')));
        },
        itemclick: function(view, record, item, index, e) {
            console.log('Click:', record.get('name'));
        }
    }
});

關鍵屬性對照

常見坑點

1. 忘記 itemSelector → 選中模型無法識別節點 → 多選/點擊全部失效。
2. 使用 Ext.selection.RowModel（Grid 專用）而非 DataViewModel。
3. 舊版遷移殘留 multiSelect: true 並存，導致衝突。

DataView 多選核心公式：DataViewModel + MULTI 模式 + 正確 itemSelector，三者缺一不可。