ExtJS4 - Grid에 파일 업로드 편집기를 추가하는 방법은 무엇입니까?

Question

3 개의 열이있는 그리드를 만들고 싶습니다. 한 열은 'textfield'이고 다른 두 열은 'filefield'로 편집기를 설정 한 이미지입니다. 이미지 열에서 렌더러를 사용하여 이미지를 표시 할 수 있지만 이미지를 편집하거나 추가 할 때 찾아보기 버튼을 눌러 이미지를 탐색 할 수 없습니다. 여기 내 코드가있다.

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'편집기를 넣을 수 있습니까? 그리드 데이터 저장 및 이미지 업로드를 위해 그리드의 저장 버튼을 클릭 할 수 있습니까?

Answer 1

빠른 조사 후이 문제에 대한 쉬운 해결책을 찾지 못했습니다. 내 생각에 EditorGrid는 이러한 유형의 작업을 지원하지 않습니다. 그리고 그리드의 편집기는 저장소의 해당 행에서 값을 수정하기위한 것입니다. 파일 업로드로 파일을 조작하지만 코드에서 볼 수 있듯이이 셀의 문자열 데이터를 기다리고 있습니다.

내가 제안하는 것은 팝업으로 파일 업로드를 팝업으로 대체하는 것입니다. 사용자가 셀을 클릭하면 fileupload로 팝업이 열립니다. 파일을 선택하고 업로드 할 때 - 팝업을 닫고 그리드 저장소에 레코드를 다시로드합니다. 그냥 생각!