관련 API : http://dev.sencha.com/deploy/dev/docs/?class=Date

화면의 폼은 데이터 수정을 위한 화면입니다. 여기에 EXpireDate 라는 Datefield 정보가 포함 되어 있습니다.

FormPanel 에 추가되었으므로 기본 코드 형태는 대충 아래와 같습니다.

new Ext.FormPanel({  renderTo: Ext.getBody(), frame: true, title: 'Title', width: 250, items: [     {         xtype: 'textfield',         fieldLabel: 'ExpireDate toString()',         name: 'ExpireDate',     },     {         xtype: 'datefield',         fieldLabel: 'ExpireDate',         name: 'ExpireDate',  allowBlank: false     }] });

DB를 통해 읽어 들인 ExpireDate 필드 데이터는 textfield 에 바인딩 시 '2011/04/09 00:00:00' 과 같은 형태로 표시 됩니다.
똑 같은 값을 Datefield 에 바인딩 하면 데이터가 표시 되지 않고 위의 캡쳐 화면과 같이 빈 값으로만 바인딩 됩니다.

ㅠ.ㅠ 아놔... 이런 왜 이럴까요... 정말 무지한 저에게 고민을 안겨주는 Datafield.. 에공공..
API 문서를 봐도 도통 제대로 넣은거 같고 별다른 문법 차이도 모르겠더군요..;;

textfield 에 뿌려 봤을 때 제대로 나오는 거 보면 데이터는 제대로 가져온 게 확실합니다.
다만 Datefield 에 바인딩 할 때 불러온 값을 date 형식으로 인식을 못 하는 거겠죠?

여기서 고민 들어 갑니다... 그럼 째는 어찌 넣어 줘야 인식이 되는 게냐;;;
EXT JS 는 정말 가혹하리 만치... 정확하지 않으면 놀아 주지 않는 군요.

구글신께도 물어 보고 여기 저기 예제랑 e-book 도 뒤져 봤는데도 감이 안 오더군요. 이렇게 저렇게 한참을 삽질 한 끝에
API 문서 구탱이에서 format 속성을 찾았습니다. API 에 보면 기본 값 형태도 나오네요.

format : String The default date format string which can be overriden for localization support. The format must be valid according t... The default date format string which can be overriden for localization support. The format must be valid according to Date.parseDate (defaults to 'm/d/Y').

일단 기본값 그대로 format: 'm/d/Y' 형식으로 넣어 봤습니다.
역시나 데이터 안 나옵니다.... 털썩. ㅠ.ㅠ

왜 안나오지.. 얘는 모냐... 고민 하면서 이것 저것 닥치는 대로 넣어 보다 결국 성공 했습니다!!!

바로 바로.... ㅠ.ㅠ

혹시나 아시겠나요??

힌트는 textfield 에 있더군요....
제가 textfield 에 값을 표시 했을 때 데이터 형식을 보면 '2011/04/09 00:00:00' 이런 표현식을 가졌습니다.
포맷을 적용해 보면 'Y/m/d H:i:s' 정도 되겠네요... 맞나요?..
그럼 넣어 봅니다...

new Ext.FormPanel({  renderTo: Ext.getBody(), frame: true, title: 'Title', width: 250, items: [     {         xtype: 'textfield',         fieldLabel: 'ExpireDate toString()',         name: 'ExpireDate',     },     {         xtype: 'datefield',         fieldLabel: 'ExpireDate',         name: 'ExpireDate',         format: 'Y/m/d H:i:s',  allowBlank: false     }] });

소스가 수정 되고 다시 화면을 보면...

아.. 이제야 제대로 바인딩 되는 군요. ㅠ.ㅠ

결론 입니다...

EXT JS 는... 정확하게 일치 하지 않으면 놀아 주지 않습니다.
에고고... 당연히 되겠지 싶은 것도 참 희안하게 일치 시켜야만 됩니다.
데이터가 완전 무결하게 동일한 형식이어야 하는 건 당연한 걸수도 아닐 수도 있는 것이지만..
EXT JS 는 Date 형식 이면 되는게 아니라... 정확하게 format 까지 일치하는 데이터 형식만 바인딩 하나 봅니다..

오늘도 삽질 하나 한 통에 시간이 훌쩍 갔습니다. ㅠ.ㅠ...
갈길은 멀지만 삽질을 통해 얻은 지식은 꽤나 오래가는 법이라는 것에... 위안을 삼습니다.;;;;

EXT JS TIP.

Datefile에 데이터 바인딩 시 field 의 Date 값을 Datefield 의 format 에 맞게 일치 시켜서 바인딩 해야 한다. 방법은 많겠지만 DB에서 읽어 올 때 하던가, Datefield 의 format 의 선언을 변경 하여 일치 시키면 됩니다.