ExtJS4 - 如何在Grid中添加文件上傳編輯器？

我想創建具有3列的網格。一列是'textfield'，另外兩列是我將編輯器設置爲'filefield'的圖像。在圖像列上，我可以使用渲染器顯示圖像，但是當編輯或添加新圖像時，我無法按瀏覽按鈕瀏覽圖像。這是我的代碼。ExtJS4 - 如何在Grid中添加文件上傳編輯器？

var grid = Ext.create('Ext.grid.Panel', { 
    title: 'Author', 
    store: Ext.data.StoreManager.lookup('authorStore'), 
    renderTo: 'authorGrid', 
    columns: [{ 
     header: 'Name', 
     dataIndex: 'name', 
     editor: { 
      xtype: 'textfield', 
     } 
    }, { 
     header: 'Icon', 
     dataIndex: 'iconImage', 
     renderer: function(val) { 
      return '<img src="' + val + '">'; 
     }, 
     editor: { 
      xtype: 'filefield', 
      allowBlank: false, 
     } 
    }, { 
     header: 'Background', 
     dataIndex: 'background', 
     renderer: function(val) { 
      return '<img src="' + val + '">'; 
     }, 
     editor: { 
      xtype: 'filefield', 
      allowBlank: false, 
     } 
    }], 
    selModel: Ext.create('Ext.selection.CheckboxModel'), 
    plugins: [ 
     Ext.create('Ext.grid.plugin.CellEditing', { 
      clicksToEdit: 2 
     }) 
    ], 
    tbar: [{ 
     iconCls: 'icon-add', 
     text: 'Add', 
     handler: function() { 
      // add record 
     } 
    }, { 
     iconCls: 'icon-delete', 
     text: 'Remove', 
     handler: function() { 
      // remove selected records... 
     } 
    }, { 
     iconCls: 'icon-save', 
     text: 'Save', 
     handler: function() { 
      store.save(); 
     } 
    }] 
});

這是什麼錯誤？我可以把'filefield'編輯器這樣嗎？是否可以單擊網格上的保存按鈕以保存網格數據並上傳圖像？

來源

2012-01-31 Benz Bumroungruksa

經過快速調查，我沒有意識到這個問題的任何簡單的解決方案。在我看來，EditorGrid不應該支持這種類型的操作。此外 - 網格中的編輯器旨在修改商店相應行中的值。使用fileupload來處理文件，但正如我在代碼中看到的，您正在等待這些單元格中的字符串數據。

我的建議是用彈出窗口替換單元格中的文件上載。當用戶單擊一個單元格時，您將打開帶有fileupload的彈出窗口。當他們選擇一個文件並上傳時 - 關閉彈出窗口並在網格商店中重新加載記錄。只是一個想法！

來源

2012-02-01 13:48:55

謝謝innerJL！你的方法解決了我的要求。 – 2012-02-02 02:19:43

ExtJS4 - 如何在Grid中添加文件上傳編輯器？

回答

相關問題