[ExtJs] Grid load 후 CheckBox Grid Select

Checkbox가 있는 Grid에서 특정 row를 선택하여 삭제, 추가, 변경 등의 작업을 한 후 일괄 저장을 한다면 상관이 없지만, 일괄 저장이 아니라 그때 그때 변화를 바로 Server측에 전송하여 저장하면 Data를 다시 load 해야 할 필요가 있게된다.

이 때 Grid의 Data를 load ( ExtCmp(‘Grid1’).getStore().load() 등을 이용)하는 경우 grid에서 선택된 row (record)가 reset된다. 특히 checkbox를 가진 grid의 경우 check box가 reset되어 버린다. 이 때, grid를 load하기 전에 선택되어 있던 record (또는 record들)을 다시 선택해 주는 trick이 필요하다.

    var f_idx = Ext.getCmp('Grid1').getSelectionModel().getSelection()[0].index;

또는

    for ( i=0; i< Ext.getCmp('Grid1').getSelectionModel().getSelection().length; i++ ) 
    {
        arr[i] = Ext.getCmp('Grid1').getSelectionModel().getSelection()[i].index;
    }

등으로 선택 record의 index를 저장을 한 후

    Ext.getCmp('Grid1').getStore().load();
    Ext.getCmp('Grid1').getSelectionModel().select(f_idx, true, true); 

으로 다시 선택해 준다. 그런데, grid를 다시 load 하면 load함수는 비동기식이므로 data를 loading하는 시간과 select() 명령에 의해 record가 선택되는 시간의 선 후가 바뀔 수가 있다. 즉, grid가 다시 load하는 동안 select() 명령에 의해 선택되어 진 후 data가 다시 reset되어 버려 select한 row(record)가 선택 해제(reset)되어버릴 수 있다.
그래서,

    Ext.getCmp('Grid1').getStore().load({
         scope:this,
         callback:function(records, operation, success){
                 Ext.getCmp('Grid1').getSelectionModel().select(f_idx, true, true); 
          }
    });

과 같이 callback 함수를 사용하여 data load가 끝난 후 select가 되도록 한다.