0

ページング ツールバーをグリッドの中央に配置したい。それを達成できる構成パラメーターまたはcssはありますか?

var store = Ext.create('Ext.data.Store', {
id:'simpsonsStore',
autoLoad: false,
fields:['name', 'email', 'phone'],
pageSize: 2
proxy: {
    type: 'ajax',
    url: 'pagingstore.js',  
    reader: {
        type: 'json',
        root: 'items',
        totalProperty: 'total'
    }
}});
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,   
    dock: 'bottom',
    displayInfo: true
}],
renderTo: Ext.getBody()});
4

1 に答える 1

4

ページング ツールバーをこのように構成すると、うまくいきます。

{
    xtype: 'pagingtoolbar',
    store: store,
    dock: 'bottom',
    displayInfo: true,

    items: ['->'],
    prependButtons: true
}

'->'これは、ページング項目の右側に別のツールバー フィラーがあることに依存しているため、 に設定displayInfoした場合falseは、代わりに MMT のソリューションを使用する必要があります。代わりにこれ：

{
    xtype: 'pagingtoolbar',
    store: store,
    dock: 'bottom',

    displayInfo: false,
    listeners: {
        single: true,
        render: function() {
            var items = this.items;
            items.insert(0, Ext.create('Ext.toolbar.Fill'));
            items.add(Ext.create('Ext.toolbar.Fill'));
        }
    }
}
于 2013-08-05T08:40:58.433 に答える