Ext JS에 Ext.DataView라는 클래스가 있습니다. Ext.data.Store에서 얻은 데이터를 가지고 XTemplate을 이용해서 원하는 형태로 데이터나 레이아웃을 원하는 형태로 변경해서 보여줄 수 있도록 해 주는 역할을 합니다. Store로 로우데이터를 구하고 DataView에서 가공해서 패널등에 보여주는 형태라고 할 수 있습니다.

이걸 사용하다가 Store에서 데이터를 가져온 뒤에 "values is undefined"라는 오류가 발생했습니다.


타이밍을 분석해 보면 Store에서 데이터를 다 읽은 후에 딱 dataview정도의 타이밍에서 발생한 것이었습니다. 사실 해결한 뒤의 결과만 보면 이유는 별것도 아니었고 원인은 사실 Copy & Paste질의 실수인 것과 마찬가지였습니다만 Miracle군과 둘다 겪은 거 보면 좀 흔히 발생할 수 있는 듯 합니다. 하지만 extjs의 내부소스를 분석하는 것은 만만치 않고 오류메세지는 좀 쌩뚱맞아서 디버깅해서 원인을 찾아가는 것이 쉽지 않았습니다.

DateView에는 prepareData라는 config option이 있습니다. prepareData는 function을 지정할 수 있는데 말그대로 데이터를 가공하는 역할을 합니다. Store로부터 가져운 데이터를 날짜의 형식을 바꾼다던지 숫자의 단위로 표현해 준다던지 하는 디스플레이할 데이터를 함수를 이용해서 변경해 줍니다.

prepareData: function(data) {}

prepareData는 위와같은 형태로 되어 있는데 data 파라미터에 Store로 부터 받은 데이터가 들어가게 되어 있습니다. 위의 오류의 원인은 prepareData에서 return data;를 해주지 않은 것 때문이었습니다.

prepareData: function(data) {
    // data 가공하기
    return data;
}

위와 같은 형태로 prepareData에서 data를 가공한 뒤에는 다시 data를 리턴해 주어야만 정상적으로 Dataview가 작동합니다. 너무 간단한 내용이네요. ㅎ