ExtJS4.07 페이지 구성 요소 pagingtoolbar

3125 단어
ExtJS4.07 페이지 구성 요소
예:
var itemsPerPage = 2;   // set the number of items you want per page

var store = Ext.create('Ext.data.Store', {
    id:'simpsonsStore',
    autoLoad: false,
    fields:['name', 'email', 'phone'],
    pageSize: itemsPerPage, // items per page
    proxy: {
        type: 'ajax',
        url: 'pagingstore.js',  // url that will load data with respect to start and limit params
        reader: {
            type: 'json',
            root: 'items',
            totalProperty: 'total'
        }
    }
});

// specify segment of data you want to load using params
store.load({
    params:{
        start:0,
        limit: itemsPerPage
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: store,
    columns: [
        { header: 'Name',  dataIndex: 'name' },
        { header: 'Email', dataIndex: 'email', flex: 1 },
        { header: 'Phone', dataIndex: 'phone' }
    ],
    width: 400,
    height: 125,
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: store,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }],
    renderTo: Ext.getBody()
});

공식적인 예에서 알 수 있듯이pagingtoolbar는grid와 함께 사용하고grid와 연결된 것은 같은store 데이터 집합이다.
gingtoolbar는 제한이 있어서 전단 페이지를 잘 실현하지 못한다. 비록 이런 에이전트가 있지만 한꺼번에 500개의 데이터를 조회한 다음에 전단을 10페이지로 나누는 것과 같은 수요를 만족시키기 어렵다.grid가 연결된 것은 같은grid의 가장 좋은 응용 장면이기 때문에 매번 현재 페이지의 데이터를 가져옵니다.
pagingtoolbar가 백그라운드 매개 변수에 전달:
pagingtoolbar 매개 변수는 사용자 스스로 재정의할 필요가 없지만 사용자가 자신의 수요에 따라 pageSize 값을 정의해야 합니다.
pageSize ＝ 25；
      page: me.currentPage,
            start: (me.currentPage - 1) * me.pageSize,
            limit: me.pageSize,
Django Dashboard Atlantis - 간단한 미션 작성을 통한 학습
자신의 정리 (1)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage