ExtJS Window 中嵌入 Form 與 Grid 完整實作範例

核心概念

ExtJS 元件組合採用 Container Layout。Window 繼承自 Panel，可透過 items 配置嵌入任意元件（Form、Grid、TabPanel 等）。

步驟與程式碼

1. 建立 Form Panel（定義 fields、buttons）。
2. 建立 Grid Panel（定義 store、columns）。
3. 在 Window items 中以陣列或 layout 包含兩者。

完整範例

Ext.onReady(function() {
    // 1. Form Panel
    var searchForm = Ext.create('Ext.form.Panel', {
        title: '查詢條件',
        bodyPadding: 10,
        layout: 'anchor',
        defaults: { anchor: '100%' },
        items: [{
            xtype: 'textfield',
            fieldLabel: '關鍵字',
            name: 'keyword'
        }, {
            xtype: 'datefield',
            fieldLabel: '日期範圍',
            name: 'startDate'
        }],
        buttons: [{
            text: '查詢',
            handler: function(btn) {
                var form = btn.up('form').getForm();
                if (form.isValid()) {
                    var grid = btn.up('window').down('grid');
                    grid.getStore().load({ params: form.getValues() });
                }
            }
        }]
    });

    // 2. Grid Panel
    var resultGrid = Ext.create('Ext.grid.Panel', {
        title: '結果列表',
        store: Ext.create('Ext.data.Store', {
            fields: ['id', 'name', 'email', 'created'],
            proxy: {
                type: 'ajax',
                url: '/api/users',
                reader: { type: 'json', rootProperty: 'data' }
            },
            autoLoad: true
        }),
        columns: [
            { text: 'ID', dataIndex: 'id', width: 60 },
            { text: '姓名', dataIndex: 'name', flex: 1 },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: '建立時間', dataIndex: 'created', width: 140 }
        ],
        flex: 1 // 佔據剩餘垂直空間
    });

    // 3. Window 包含 Form + Grid（垂直排列）
    var win = Ext.create('Ext.window.Window', {
        title: '用戶查詢',
        width: 700,
        height: 500,
        layout: 'vbox', // 垂直盒子佈局
        modal: true,
        closeAction: 'hide',
        items: [searchForm, resultGrid] // Form 在上，Grid 在下
    });

    // 顯示窗口
    Ext.getCmp('showWinBtn').on('click', function() { win.show(); });
});

關鍵配置說明

官方範例參考

ExtJS 安裝包 examples/form/form-grid.html 即為 Form + Grid 組合示範，可直接複製修改。