ExtJS 彈出表格視窗雙擊選取回填表單：完整實作範例

完整範例 (Ext JS 6/7 Modern/Classic 通用)

Ext.define('MyApp.view.SelectorWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.selectorwindow',
    title: '選擇資料',
    modal: true,
    closeAction: 'hide',
    width: 600,
    height: 400,
    layout: 'fit',
    items: [{
        xtype: 'grid',
        reference: 'grid',
        store: {
            fields: ['id', 'name', 'code', 'spec'],
            proxy: {
                type: 'ajax',
                url: '/api/data/list', // 後端提供資料
                reader: { type: 'json', rootProperty: 'data' }
            },
            autoLoad: true
        },
        columns: [
            { text: 'ID', dataIndex: 'id', width: 60 },
            { text: '名稱', dataIndex: 'name', flex: 1 },
            { text: '代碼', dataIndex: 'code', width: 100 },
            { text: '規格', dataIndex: 'spec', width: 150 }
        ],
        listeners: {
            itemdblclick: 'onItemDblClick'
        }
    }],
    // 透過 ViewController 解耦
    controller: {
        onItemDblClick: function(grid, record) {
            var win = grid.up('window');
            // 觸發自訂事件，攜帶 record，讓父容器/主表單處理
            win.fireEvent('select', record);
            win.hide();
        }
    }
});

// 主表單/視圖使用
Ext.define('MyApp.view.MainForm', {
    extend: 'Ext.form.Panel',
    items: [
        { xtype: 'textfield', fieldLabel: 'ID', name: 'id', reference: 'fldId' },
        { xtype: 'textfield', fieldLabel: '名稱', name: 'name', reference: 'fldName' },
        { xtype: 'textfield', fieldLabel: '代碼', name: 'code', reference: 'fldCode' },
        { xtype: 'button', text: '選擇', handler: 'onSelectClick' }
    ],
    controller: {
        onSelectClick: function(btn) {
            var win = Ext.create('MyApp.view.SelectorWindow');
            win.on('select', this.onDataSelected, this); // 監聽選取事件
            win.show();
        },
        onDataSelected: function(record) {
            var vm = this.getViewModel();
            this.lookupReference('fldId').setValue(record.get('id'));
            this.lookupReference('fldName').setValue(record.get('name'));
            this.lookupReference('fldCode').setValue(record.get('code'));
            // 其他欄位...
        }
    }
});

關鍵點

1. **資料來源**：Grid Store `proxy.url` 指向後端 API，回傳 `{ success: true, data: [...] }`。
2. **雙擊事件**：`itemdblclick` 取得 `record` (Model 實例)，`record.get('field')` 取值。
3. **解耦**：視窗 `fireEvent('select', record)`，主表單 `on('select', handler)`，不直接引用彼此元件。
4. **參數傳遞**：若需帶參數查詢，`win.down('grid').getStore().load({ params: { type: 'xxx' } })`。

若公司有封裝基類，請繼承並覆寫 `loadData(params)`、`getSelectedRecord()` 等方法，核心邏輯不變。