flex DataGrid에서 itemRenderer를 사용하면서의 경험

 출처 : http://cafe.naver.com/flexcomponent/5561

무생인(jklee2006) 님의 글

이틀동안 itemRenderer로 헤메다가 [일심]님의 도움으로 마무리를 지어가고 있습니다...

그런데 문제점이 발생을 하더군요...

데이터가 교체되는 시점을 잡기위해서 HBOX안에 있는 컴퍼넌트중 하나에 updateComplite 이벤트를 주고

그 이벤트 발생시에 스크립트를 처리하도록 했습니다...

그런데 영~~ 속도가 느리더군요...

그래서 스트립트 안에서 trace를 시켜 보았습니다...

그랬더니 한번만 돌아야 될 스크립트가 수십번을 돌더군요...

스크립트 안에서 updateComplite 이벤트를 지정해준 객체의 속성이 바뀔때마다 다시 도는것 같습니다...

정확한 원인은 아니고 제추측에...

별짓을 다해보았습니다...

플래그를 주어서 두번다시 돌지 않게 해보려고 해도 안되고...

해서 찾은 방법은 스크립트를 통째로 각 컴퍼넌트 안에다 넣어 보았습니다...

그리고 이벤트 발생 부분도 없애 버렸죠...

오~~ 속도가....

워낙 초짜라서 정말 무식한 방법으로 해결을 한것 같지만...

혹 다른 분들도 모르고 넘어가실지 몰라서 이렇게 제 경험을 올립니다...

더 좋은 방법으로 해결하신 분이 계신다면... (물론 있겠죠)

해결 방법을 좀 공개 해주셨으면 합니다...

너무 얌체같이 얻으려고만 하는 저 자신도 좋진 않지만...

이러다 보면... 답변을 더 많이 하는 날이 오겠죠...

빨간 부분이 수십번 반복처리 되던 부분이고 파란 부분이 수정한 부분 입니다...

   <mx:DataGridColumn headerText="제        목" sortable="false" textAlign="center">
      <mx:itemRenderer>
         <mx:Component>
            <mx:HBox horizontalScrollPolicy="off" horizontalGap="0" horizontalAlign="left">
               <mx:Script>
                  <![CDATA[
                     import component.ActionScript.iconClass;
//                   private function subjectCreation():void {
//                      _depthGab.width = data.depth == 0 ? 0 : data.depth * 15 - 12;
//                      _depthImage.width = data.depth == 0 ? 0 : 17;
//                      _depthImage.source = data.depth == 0 ? null || "" : iconClass.depthImage;
//                      _subject.text = data.subject_t;
//                      _subject.setStyle("color", data.notice_use == 1 ? "#770000" : "#000000");
//                      _subject.width = this.width - (data.depth == 0 ? 0 : data.depth * 15 + 5)

//                                                             - (data.upfile == null || data.upfile == "" ? 0 : 18);
//                      if (data.upfile == null || data.upfile == "") {
//                         _dataImage.source =  null;
//                         _dataImage.toolTip = "";
//                         _dataImage.width =  0;
//                      } else {
//                         trace(data.brd_no);
//                         _dataImage.source = iconClass.diskImage;
//                         _dataImage.toolTip = data.srfile.replace(/\*/g,"\n");
//                         _dataImage.width = 18;
//                      }
//                   }
                  ]]>
               </mx:Script>
               <mx:Label id="_depthGab" width="{data.depth == 0 ? 0 : data.depth * 15 - 12}"/>
               <mx:Image id="_depthImage"
                  width="{data.depth == 0 ? 0 : 17}"
                  source="{data.depth == 0 ? null || '' : iconClass.depthImage}"
                  verticalAlign="middle" useHandCursor="true"/>
               <mx:Label id="_subject" text="{data.subject_t}"  textAlign="left"
                  width="{this.width - (data.depth == 0 ? 0 : data.depth * 15 + 5)

                                                 - (data.upfile == null || data.upfile == '' ? 0 : 18)}"
                  truncateToFit="true" 
                  color="{data.notice_use == 1 ? 0x770000 : 0x000000}"/>
               <mx:Image id="_dataImage"
                  width="{(data.upfile == null || data.upfile == '') ? 0 : 18}"
                  source="{(data.upfile == null || data.upfile == '') ? null : iconClass.diskImage}"
                  toolTip="{(data.upfile == null || data.upfile == '') ? '' : data.srfile.replace(/\*/g,'\n')}"
                  verticalAlign="middle"/>
            </mx:HBox>
         </mx:Component>
      </mx:itemRenderer>
   </mx:DataGridColumn>

아래쪽에 리플에도 썼듯이요. 제가 구현하는 방법도 밑에 방법입니다. 아이템 렌더러 안에서 스크립트구문을 작성하고 디스패치 이벤트를 이용해서 이벤트를 감지해서 실행시키는방법보다 데이터가 랜더러에 입혀질때. 상황에 맞게 값을 씌워주기만하면돼죠.

단지 제가 구현하는 방법은 무생인님방식보다는 해당 그리드의 컬럼에 관련된 하나의 함수묶음(클래스)를 만들어 두고 width={클래스명.체크후값을반환하는함수명(data.값)} 형식이나 width={클래스명.체크후값을반환하는함수(data)} 형식으로 처리합니다.

예전에는 클래스나 함수에 coller 라는 속성이 있어서 속성하나에 클래스(data)해주고 해당클래스에서 자기를 호출한 부모 오브젝(라벨이나 이미지콤포넌트)의 값을 변환하게 했었는데요. AS3.0에서는 아키텍쳐상 coller가 없어진거 같더라구요..ㅠㅠ;;