CODEWITHSUNDEEP
extjsextjs4.2
sushant jain
sushant jain

Reputation: 213

How to align Paging toolbar in middle of grid

I want to align pagging tool bar in middle of grid. Is there any config parameter or css by which i can achieve that?

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()});

Upvotes: 0

Views: 2698

Answers (1)

rixo
rixo

Reputation: 25001

Configure your paging toolbar this way would do the trick:

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

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

This relies on having another toolbar filler '->' on the right of the paging items, so if you set displayInfo to false, you should use MMT's solution instead. this instead:

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

Upvotes: 4

Related Questions