안녕하세요.
김종광입니다.

이번엔 Sencha Touch/Ext JS 에서
Loading… 표시를 자동으로 show/hide 하는 방법에 대해 말씀 드리겠습니다.

소스코드 마다
Ext.Viewport.setMasked(…) 했다가
Ext.Viewport.setMasked(false) 하는건 여간 귀찮은 것이 아닙니다.

대부분 이러한 표시는 Ajax 통신 할 때 표시 합니다.
Ajax 사용하지 않을 때는 그다지 느린 경우가 없으니 잘 사용 안하지요.

방법은 Ext.Ajax 객체의 Event 를 잡아서 show/hide 하는 것입니다.
그럼 Ext.Ajax 의 Event는 어떤 것이 있는지 API를 보겠습니다.

Sencha Touch , Ext JS. 자동 Loading 표시​

딱! 알맞은 이벤트 3개가 보이는 군요 ^^v

  • beforerequest : 이 때 Loading… 표시를 하고
  • requestcomplete : 이 때 표시를 제거하면 됩니다.
  • requestexception : 이건 Ajax 통신에 문제가 생겼을 때 인데요. 인터넷이 끊기거나 하는 경우겠지요.
    • requestexcetpion 때 Loading 표시 하지 않으면, Mask 가 살아 있어 그냥 먹통이 되니까 꼭!! 넣어 주셔야 합니다.

코드로 정리하면 아래와 같습니다.
(테스트는 Sencha Touch 에서만 했습니다만, Ext JS 에서도 비슷하게 구현 가능합니다.)
(Sencha Touch 와 Ext JS 의 Ext.Ajax Events가 같습니다.)

Ext.Ajax.on('beforerequest', function (con, opt) {
  Ext.Viewport.setMasked({
    xtype: 'loadmask',
    message: 'Please wait',
    indicator: true
  });
}, this);

Ext.Ajax.on('requestcomplete', function (con, res, opt) {
  Ext.Viewport.setMasked(false);
}, this);

Ext.Ajax.on('requestexception', function (con, response, opt) {
  Ext.Viewport.setMasked(false);
}, this);

위 코드는 app.js 의 lauch() 정도에 넣어주면 좋겠네요.

Loading 표시가 있는 것과 없는 것은 기다리는 사람에게 큰 차이를 불러옵니다.
꼭 넣어 주시는 것이 좋겠지요. 이렇게 편리 하다면요 ^^

 


[ 김종광 - JongKwang Kim ]

- 주식회사 종광, CTO & Founder
- 한국센차유저그룹 운영자
- 미래부/NIPA, 소프트웨어 마에스트로 멘토

- E-Mail : kim@jongkwang.com
- Blog : http://jongkwang.com
- Twitter : @jongkwang
- Facebook : https://facebook.com/kimjongkwang