1
기본 저장소가 변경되면 pagingtoolbar의 정보를 업데이트하려고합니다. 다음 코드가 있다고 가정 해 봅시다.Ext JS 4 : Grid의 PagingToolbar 업데이트
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', 'examples/ux');
Ext.require(['Ext.ux.data.PagingMemoryProxy']);
Ext.onReady(function() {
var data = [
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'}
];
Ext.define('model', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'phone', type: 'string'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'model',
proxy: {
type: 'pagingmemory'
},
extraParams: {
start: 0,
limit: 1
},
//data: data, // uncomment this
pageSize: 7,
remoteSort: false
});
Ext.define('mygrid', {
extend: 'Ext.grid.Panel',
store: store, // initially just an empty store
id: 'grid',
dockedItems: [{
xtype: 'pagingtoolbar',
dock: 'bottom',
store: store,
displayInfo: true
}],
columnLines: true,
height: 700,
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
align: 'center'
}, {
header: 'Phone',
dataIndex: 'phone',
flex: 1,
align: 'center'
}]
});
Ext.create('Ext.Viewport', {
layout: 'border',
title: 'My viewport!',
items: [{
region: 'center',
items: [Ext.create('mygrid')]
}]
});
store.loadRawData(data); // comment this out
/*grid.addDocked({
xtype: 'pagingtoolbar',
store: store,
displayInfo: true,
dock: 'bottom',
pageSize: 7
});*/ // doesn't work
//Ext.getCmp('grid').getDockedItems()[0].moveFirst(); // doesn't work
//store.loadPage(1); // doesn't work
});
이 코드를 실행하면 눈금에 모든 데이터가 포함됩니다 (페이징 없음). 그러나 내가 말한 줄의 주석을 달거나 주석을 제거하면 그리드는 페이지 당 정확한 양의 데이터를 포함합니다.
내가 알고 싶은 것은 PagingToolbar를 업데이트하여 내가 상점에 추가 한 데이터를 올바르게 페이지 할 수 있습니까? 나는 PagingToolbar와 store.loadPage 함수에 moveFirst 함수를 사용하려고 시도했지만, 그것은 나에게 "결과가 정의되지 않았다."라는 Firebug 오류를 준다. 나는 또한 this SO answer을 시도했지만 아무 것도하지 않는 것처럼 보였다. 내가 시도한 마지막 것은 저장소에 데이터가 채워진 후에 PagingToolbar를 추가하는 것이지만 분명히 아무 것도 시도하지 않았다.