Ext JS Delete model in Ext JS 5

 Ext JS를 사용하면서 어떠한 모델의 데이터를 삭제해야하는 경우 저는 "erase"함수를 이용합니다.

그런데 이 "erase" 함수를 사용할 때 모델에 설정해 두었던 idProperty를 지정해 주지 않으면 아무리 erase함수를 호출해도 모델에 설정한 destroy API가 호출이 되질 않았습니다.

 때문에 항상 idProperty가 필요 하지 않은 데이터라도 불필요하게 idProperty를 강제로 선언하여 erase함수를 호출하고는 했습니다. 그런데!!!!! 강제로 idProperty를 설정 해두었는데도!! erase 함수가 동작을 안하는 상황이 발생했습니다.

도무지 어떻게 해결을 해야 할지 갈피를 못잡다 역시 구글신을 통해 해결법을 알게되었습니다.

우선 작성한 코드는 다음과 같습니다.

위에서 사용한 Items라는 모델은 다음과 같이 선언되어있습니다.

그럼 여기서 위의 코드의 5라인에서 출력한 로그의 결과를 보면 다음과 같습니다.

분명 idProperty로 지정한 itm_no 라는 항목이 Ext JS에서 자동으로 부여하는 값으로 설정되어 있는데 erase 함수는 호출이 되지 않고 있습니다.

이러한 문제가 발생해서 구글링을 한결과 http://www.balasblog.com/2015/01/model-deletion-in-extjs-5.html 요기에서 답을 찾을 수 있었습니다.

In the preceding function call, will not be any XHR request with 'DELETE' method as we expect, if you are using ExtJS-5.1.0. In ExtJS 4, if there is any change in the ID property, it calls a function(changeId) that does house keeping of a model hence, model's phantom becomes false whereas in ExtJS5, user.set('id','12345') will not change user's phantom to false(When we create model using Ext.create, default phantom value will be true). Since it is a phantom record(new record), it will not call any 'DELETE' request.

Here is a simple hack to handle this problem. We hope there will be a fix in their future releases.

user.set('id','12345');
user.commit(); // user.phantom becomes false
user.erase();

or

user.set('id','12345');
user.phantom = false; //Make phantom as false manually
user.erase();

 위 블로그의 설명대로 해당 모델에 commit 함수를 호출하거나 해당 모델의 phantom 속성을 false로 선언하면 erase함수가 정상적으로 호출되는 것을 확인했습니다. 

 Ext JS에서는 Ext.create로 모델을 생성할 경우 이 모델은 가짜모델(새로운모델)이라 하여 phantom(가짜인지 진짜인지 식별하는 속성)속성이 true가 되고 이 때문에 삭제 요청을 하지 않는다고 합니다. 때문에 모델의 commit함수 호출 또는 phantom속성을 false로 부여해 이 모델이 진짜 모델이라는걸 설정해 주어야 정상적으로 erase함수가 호출되게 된다고 합니다. 

 무조건적으로 id가 있어야 동작한다는 생각은 틀린것이었고, 요 phantom이라는 속성에 의해 호출이 된다는걸 알아두어야할것 같습니다.

추가 . phantom 속성은 DB에 값이 존재하는지 존재하지 않는지를 구분하는 값이라고 합니다.