Comment aligner la barre d'outils de pagination au milieu de la grille

Question

Je souhaite aligner la barre d'outils de pagage au milieu de la grille. Y at-il un paramètre de configuration ou css par lequel je peux réaliser cela?

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

Configurez votre barre d'outils d'échange de cette façon ferait l'affaire:

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

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

Cela repose sur d'avoir une autre barre d'outils de remplissage '->' à droite des éléments de pagination, donc si vous définissez displayInfo-false, vous devrait utiliser la solution du MMT à la place. ceci:

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