[ExtJS] Ext.PagingToolbar 커스터마이징 팁!!

ExtJS 에서 Ext.PagingToolbar 를 이용하게 되면 위와 같이 똘똘한 페이징 툴바를 사용할 수 있습니다.

하지만... 별도로 파라미터를 이용한다면... 약간의 커스터마이징이 필요합니다.

new Ext.PagingToolbar({

           pageSize: 20,

           prependButtons: true,

           store: new Ext.data.JsonStore({

                     root: 'rows',

                     totalProperty: 'totalCount',

                     idProperty: 'table',

                     remoteSort: true,

                     fields: [ ... ],

                     proxy: new Ext.data.HttpProxy({

                         url: '~~~'

                     })

           },

           ...,

           doLoad: function(start) {

                     var o = this.store.lastOptions.params;

                     var pn = this.getParams();

                     o[pn.start] = start;

                     o[pn.limit] = this.pageSize;

                     if (this.fireEvent('beforechange', this, o) !== false) {

                                this.store.load({

                                          params: o

                                });

                     }

           }

});

doLoad() 함수를 오버라이딩 하고, store 의 가장 마지막 파라미터를 이용하였습니다.
(기존의  doLoad() 함수에 파라미터만 얹은 격이죠)

위와 같이 하면 기존의 파라미터에 시작 번호와 리미트만 바뀌기 때문에 원하는 결과를 얻을 수 있습니다.