ExtJS 3.2 文件上傳組件：獲取選中文件名並回填 TextField

需求

表單包含 ``，用戶選擇文件後，自動將文件名顯示在旁邊的 `TextField`（`boardName`）中。

解決方案：監聽 filefield 的 `change` 事件

{
    xtype: 'filefield', // ExtJS 3.x 使用 'filefield' 或 'textfield' + inputType:'file'
    fieldLabel: 'Zip File',
    allowBlank: false,
    name: 'file',
    emptyText: 'No file selected',
    listeners: {
        change: function(field, value) {
            // value 為完整偽路徑，如 "C:\fakepath\xxx.zip"
            var fileName = value.split('\\').pop().split('/').pop(); // 兼容 Win/Unix 路徑分隔符
            Ext.getCmp('boardName').setValue(fileName);
            // 若需副檔名填入 boardRevision
            var ext = fileName.split('.').pop();
            Ext.getCmp('boardRevision').setValue(ext || '');
        }
    }
}

關鍵點

• ExtJS 3.x 中 `filefield` 的 `change` 事件參數：`(field, value)`，`value` 為瀏覽器返回的偽路徑字符串。
• 瀏覽器安全限制，**無法獲取真實本地路徑**，只能拿文件名。
• `Ext.getCmp('id')` 獲取組件實例，`setValue()` 設置值並觸發 UI 更新。

完整表單片段

var fm = new Ext.FormPanel({
    renderTo: Ext.getBody(),
    title: 'CAD Upload',
    items: [
        { xtype: 'textfield', fieldLabel: '文件名', id: 'boardName', width: 200 },
        { xtype: 'textfield', fieldLabel: '文件類型', id: 'boardRevision', width: 200 },
        {
            xtype: 'filefield',
            fieldLabel: 'Zip File',
            name: 'file',
            listeners: {
                change: function(f, v) {
                    var name = v.replace(/^.*[\\\/]/, ''); // 正則取文件名更簡潔
                    Ext.getCmp('boardName').setValue(name);
                    Ext.getCmp('boardRevision').setValue(name.split('.').pop() || '');
                }
            }
        }
    ],
    buttons: [{ text: '上傳', handler: function() { fm.getForm().submit({...}); } }]
});

避坑提示

• ExtJS 3.2 已停止維護，**新項目請用 ExtJS 6/7+ (Modern/Classic)** 或遷移至 React/Vue/Angular。
• 文件上傳需後端支援 `multipart/form-data` 解析（Java: Commons FileUpload / Servlet 3.0 `request.getPart`）。
• 大文件上傳建議啟用分片/斷點續傳（Plupload / Resumable.js + 後端合併）。