[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() 함수에 파라미터만 얹은 격이죠)


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