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中添加文件上传编辑器？

回答

相关问题