ExtJS 4/6 View組件onClick移除後的選中行獲取替代方案

ExtJS版本遷移坑：View.onClick移除後的拖拽選中行解決方案

ExtJS 4.0+移除Ext.view.View.onClick方法後，導致拖拽操作時若未先點擊，view.getSelectedNodes()返回空數組的經典問題。本文提供官方推薦的替代方案與最佳實踐。

問題背景

在實現DataView/Grid拖拽功能時，常見代碼模式：

// 舊代碼（ExtJS 3.x）
view.onClick = function(e) {
    // 自定義點擊邏輯
    this.getSelectedNodes(); // 依賴內部選中狀態
};

ExtJS 4+重寫事件系統，onClick不再暴露，直接覆蓋會破壞內部選中邏輯。

官方推薦解決方案

利用事件對象e.getTarget()獲取點擊元素，手動維護選中狀態：

// 在拖拽開始事件（如beforedrag）中處理
var sourceEl = e.getTarget('.thumb-wrap'); // 或 Ext.getCmp(id)
// 拖拽對象
if (sourceEl) {
    var selectedNodes = this.view.getSelectedNodes();
    // 關鍵：若無選中行，將點擊元素加入選中集合
    if (selectedNodes.length < 1) {
        selectedNodes.push(sourceEl);
    }
    // 後續拖拽邏輯使用 selectedNodes
}

完整拖拽實現模式

Ext.define('My.view.DraggableDataView', {
    extend: 'Ext.view.View',
    alias: 'widget.draggableview',
    
    initComponent: function() {
        this.plugins = [{
            ptype: 'dataviewdragdrop',
            dragGroup: 'myGroup',
            dropGroup: 'myGroup'
        }];
        this.callParent();
    },
    
    listeners: {
        beforedrag: function(dragZone, e) {
            // 核心修復：確保有選中節點
            var sourceEl = e.getTarget(this.itemSelector);
            if (sourceEl) {
                var selected = this.getSelectedNodes();
                if (selected.length === 0) {
                    selected.push(sourceEl);
                }
            }
        },
        drop: function(node, data, overModel, dropPosition, eOpts) {
            // 獲取拖拽的記錄
            var records = data.records;
            // 業務邏輯處理
        }
    }
});

替代方案對比

最佳實踐建議

1. 優先使用內建插件：dataviewdragdrop插件已處理大部分邊界情況
2. 統一封裝基類：將修復邏輯封裝在基類beforedrag监听器中
3. 測試邊界情況：無選中拖拽、多選拖拽、跨組件拖拽
4. 查閱版本發布說明：ExtJS 6.2+可能有新API（如setSelected()）

版本遷移時，理解框架內部機制變化比單純找替代API更重要。ExtJS事件系統重構體現了「配置優於繼承」的設計哲學，掌握SelectionModel與NavigationModel才是長久之計。

1. 上一篇文章： C語言輸入驗證最佳實踐：從scanf陷阱到健壯的通用輸入函數
2. 下一篇文章： Java星號圖形打印代碼詳解：雙層循環控制行與列

程式設計疑難解答

iOS 打包 IPA 上傳非 App Store 平台（企業/Ad Hoc）流程

打包步驟 Xcode 選擇 Generic iOS Dev

Java 入門實戰：輸入數字輸出對應數量的星號

需求分析 從控制台讀取一個正整數 n，在控制台打印 n 個

jQuery 將 span 標籤文本賦值給 data-* 自定義屬性

場景 頁面結構如下，需將每個 `` 的文本內容寫入其 `da

C 語言轉義字符詳解：雙引號與反斜桿的正確用法

疑問代碼片段 \5 7\ 初學者常困惑：為什麼要寫成 \5