Sencha Touch의 목록에 사용자 정의 gif 로더를 사용하려면 어떻게해야합니까?

Question

Sencha에서 Ext.dataview.List을 사용하면 데이터가로드되는 동안 자동으로 멋진 로딩 스피너가 삽입됩니다. 그게 다 괜찮아요,하지만 멋지 네요,하지만 난 사용자 정의 로더 .gif을 사용하는 방법을 알고 싶습니다.

나는 주위를 둘러 보았고로드 마스크를 변경해야한다고 생각했지만 긍정적 인 이유는 아니라고 생각한다. this link을 참조하십시오.

다음은 내 목록 중 하나에 대한 코드입니다. 한 곳에서 제안 된 코드를 추가하여 모든 목록이 영향을 받고 새로운 회 전자를 가질 수 있기를 희망합니다.

{ 
     xtype: 'list', 
     height: '', 
     id: 'categoryList', 
     itemId: '', 
     width: '100%', 
     scrollable: false, 
     emptyText: '<div class="pdtsListHtml" style="margin-top:30%">Product List Empty</div>', 
     itemTpl: [ 
      '<div ><div class="pdtsListHtml" style="display:inline;">{navigationElementItemName}&nbsp;({navigationElementItemRecordCounts})</div><div style="display:inline;float:right;margin-right:5px;"><img src="resources/image/arrow.png" width="11" height="11"></div></div>' 
     ], 
     store: 'productListStore', 
     allowDeselect: true, 
     onItemDisclosure: false 
     } 

Answer 1

여기 당신에게 GIF를 사용하는로드 마스크 예를 들어 목록을 보여줍니다 fiddle입니다.

기본적으로 당신은 당신의 자신의 Ext.LoadMask 서브 클래스를 정의하고 목록을 사용해야합니다

Ext.define("Test.MyLoadMask", { 
    extend: "Ext.LoadMask", 
    alias: "widget.myloadmask", 
    getTemplate: function() { 
     var prefix = Ext.baseCSSPrefix; 

     return [ 
      { 
       reference: 'innerElement', 
       cls: prefix + 'mask-inner', 
       children: [ 
        { 
         reference: 'indicatorElement', 
         cls: prefix + 'loading-spinner-outer', 
         children: [ 
          { tag: 'img', src: "http://example.com/my-spinner.gif" } 
         ] 
        }, 
        { 
         reference: 'messageElement' 
        } 
       ] 
      } 
     ]; 
    } 
}); 

그런 다음 xtype을 수정하고 myloadmask 대신 loadmask로 설정하여 목록에 applyMasked을 정의해야합니다.