extjs - 如何在网格中间对齐分页工具栏

Question

我想在网格中间对齐分页工具栏。是否有任何配置参数或 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()});

Answer 1

以这种方式配置分页工具栏可以解决问题：

{
    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'));
        }
    }
}