[ExtJS]ExtJS의 FormPanel의 Fileupload 속성을 사용한 파일 업로드
WEB2.0/ExtJS |
2010. 4. 23. 11:25
파일을 업로드할 때에는 form의 enctype을 multipart/form-data 타입으로 지정해야 한다.
2.x의 ExtJS의 FormPanel에서는 이를 지정할 수 없어 별도의 플러그인인을 사용해오곤 했는데
3.x에서는 FormPanel에 FileUpload라는 속성이 추가되어 파일업로드를 할 수 있게 되었다.
new Ext.FormPanel({
fileUpload: true,
baseParams: {
foo: 'bar'
},
url: 'myProcess.do',
items: [{
xtype: 'fileuploadfield',
name: 'upload'
}],
buttons: [{
text: 'Save',
handler: function(){
var fp = this.ownerCt.ownerCt,
form = fp.getForm();
if (form.isValid()) {
form.submit();
}
}
}]
});업로드 성공시
{'success':true}
라는 JSON 객체를 반환하도록 구현하였는데.아무런 반응도 없다. 반환하는 result 값으로 failure와 error도 만들어봐도 수신하지 못한다.
확인된 스크립트 에러는 JSON 유형에 맞지 않아 파싱할 수 없단다. -_-a
확인해보니 반환된 값은
<PRE>{'success':true}</PRE>
허걱. 갑자기 무슨 PRE 태그란 말인가? 덕분에 한참 삽질한 덕분에 알게된 사실.
기본적으로 BasicForm은 Ext.form.Action.Submit 인스턴스를 이용하여 ajax 를 통한 submit을 수행하는데
FileUpload 옵션을 사용하는 경우 Ajax submission이 수행되지 않기 때문에 XMLHttpRequests 를 받지 못하게 되기 때문에
발생한 문제....
해결방법은 두가지.
Ext.form.Action.Submit 인스턴스가 아닌 Ext.Ajax.request 로 수행되도록 하던지 (standardSubmit 의 config 옵션을 사용하는 방법은 FileUpload 옵션이 우선되어 적용되지 않는다.)
또다른 방법으로 Hidden 속성인 iFrame을 사용하여 target을 XMLHttpRequests가 아닌 수신받는 XMLHttpRequests를 참조하는별도의 페이지로 지정하면 된다.
예를 들어 result.jsp라는 것을 동적으로 XMLHttpRequests들 수신하게 만들어두고 target을 result.jsp로 지정하면
PRE 태그가 빠진 정상적인 JSON객체를 수신받을 수 있게 된다.
그냥 기존대로 쓸껄 하는 생각이 들지만 머 표현의 가능성은 선택이니..몰랐던 것을 알게된 것으로 만족하자....화이팅~
'WEB2.0 > ExtJS' 카테고리의 다른 글
| [ExtJS 3.2] 이벤트 핸들러 등록하기 (0) | 2010.04.23 |
|---|---|
| [2.2X] Grid 헤더 메뉴 아이콘이 제대로 보이지 않는 경우..[IE6] (0) | 2009.06.30 |
| [ExtJS 2.2x] IE8에서 달력이 짤려서 나올때 (0) | 2009.04.17 |
| [searchField] IE8에서 TriggerField가 이상하게 보이는 버그 패치 (0) | 2009.04.17 |
| [ExtJS 2.x]IE8에서 텍스트 필드 상단 라인이 보이지 않는 문제 (0) | 2009.04.17 |
