PDA

View Full Version : how to insert an Ext.PagingToolbar inside another toolbar



maneljn
4 Oct 2012, 12:14 AM
i have a panel with a top docked toolbar.
I want to insert after the toolbar buttons, my Ext.PagingToolbar like if it was another item, in the same visible row.

This example does not show the pagingtoolbar,



// Barra paginacion de la lista
var paginacionGridCatequipos = Ext.create('Ext.PagingToolbar', {
name: 'paginacionGridCatequipos',
store: storeCatequipos,
displayInfo: true,
pageSize: RegxPagxDefectoCategorias,
plugins : [Ext.create('Ext.ux.PagingToolbarResizer')]
});

.....

// barra botones superior
dockedItems: [{
xtype: 'toolbar',
items: [
nuevoCatequipoAction,
editarCatequipoAction,
borrarCatequipoAction,
paginacionGridCatequipos
]
}],

....

vietits
4 Oct 2012, 12:36 AM
The following example works fine with Ext 4.1.1 and Chrome. Let have a try.


Ext.onReady(function(){
var store = Ext.create('Ext.data.Store', {
fields: ['f1', 'f2'],
data: [{
f1: '1.1', f2: '1.2'
},{
f1: '2.1', f2: '2.2'
}]
});

Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
width: 500,
height: 200,
store: store,
tbar: {
items: [{
text: 'Button 1'
},{
text: 'Button 2',
},'-', {
xtype: 'pagingtoolbar',
store: store,
border: false
}]
},
columns: [{
header: 'F1',
dataIndex: 'f1',
flex: 1
},{
header: 'F2',
dataIndex: 'f2',
flex: 1
}]
});
});

maneljn
4 Oct 2012, 1:04 AM
Doesn't work.
It shows only a little box with no width.

Manel



The following example works fine with Ext 4.1.1 and Chrome. Let have a try.


Ext.onReady(function(){
var store = Ext.create('Ext.data.Store', {
fields: ['f1', 'f2'],
data: [{
f1: '1.1', f2: '1.2'
},{
f1: '2.1', f2: '2.2'
}]
});

Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
width: 500,
height: 200,
store: store,
tbar: {
items: [{
text: 'Button 1'
},{
text: 'Button 2',
},'-', {
xtype: 'pagingtoolbar',
store: store,
border: false
}]
},
columns: [{
header: 'F1',
dataIndex: 'f1',
flex: 1
},{
header: 'F2',
dataIndex: 'f2',
flex: 1
}]
});
});

vietits
4 Oct 2012, 1:15 AM
Below is the screenshot of running my example. It is what you want?

39132

maneljn
4 Oct 2012, 1:37 AM
Vietits, that's what i obtain with this code:



// barra botones superior
tbar: { items: [
nuevoCatequipoAction,
editarCatequipoAction,
borrarCatequipoAction,
{
xtype: 'pagingtoolbar',
name: 'paginacionGridCatequipos',
store: storeCatequipos,
displayInfo: true,
pageSize: RegxPagxDefectoCategorias,
plugins : [Ext.create('Ext.ux.PagingToolbarResizer')]
}
]
},



See attached screen shot

vietits
4 Oct 2012, 2:02 AM
There is a difference between my code and yours: your code uses plugin Ext.ux.PagingToolbarResizer and my code does not use. Maybe this is the reason that cause the problem. I don't have this extension to test with.

maneljn
4 Oct 2012, 2:10 AM
i've tried also without this plugins and does the same.

I think there is something about the width of the pagingtoolbar, probably if the grid is not showed before or something aboout this ???

vietits
4 Oct 2012, 2:39 AM
So, it will be better if you could post a test case for your problem?