PDA

View Full Version : Override Pagingtoolbar and add combbox item.



shakerkk
22 Sep 2014, 1:40 AM
Hello, i have some problems with my function on overrided pagingtoolbar i just want to know why or how can i make this work :


Ext.define('aw.grid.PagingToolbar', {
extend: 'Ext.toolbar.Paging',
alias: 'widget.custompaging',
displayInfo: true,
items: [
{
xtype: 'combobox',
store: ['5', '10', '15', '20'],
width: 50,
queryMode: 'local',
allowBlank: false,
editable: false,
triggerAction: 'all',
maskRe: /[0-9]/,
listeners: {
init: function (paging) {
debugger;
var me = this;
paging.on('afterrender', me.onInitView, me);
},
onInitView: function (paging) {
var me = this;
me.setValue(paging.store.pageSize);
for (var i = 0; i < paging.items.length; i++) {
if (paging.items.items[i].xtype == 'tbfill') {
paging.remove(paging.items.items[i]);
paging.add(i, me);
}
}
me.on('select', me.onPageSizeChanged, paging);
me.on('specialkey', function (combo, e) {
if (13 === e.getKey()) {
me.onPageSizeChanged.call(paging, me);
}
});
},
onPageSizeChanged: function (combo) {
var me = this;
me.store.pageSize = parseInt(combo.getRawValue(), 10);
me.doRefresh();
}
}
},
{
xtype: 'button',
text: 'x - Rows selected'
}
]
});
The problem i have is that my listeners are not working ...and i dont know how to make this work...i dont know if its okey like this ..

Farish
22 Sep 2014, 2:11 AM
dont know what the problem is in your code but you can try adding the listeners while creating the combo itself. here is how I do it:


Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: ' {0} - {1} of {2}',

items:
[
{
xtype: 'combo',
itemId: 'linesPerPage',
name: 'linesPerPage',
width: 70,
store: Ext.create('Ext.data.Store', {
fields: ['text'],
data:
[
{"text":"25"},
{"text":"50"},
{"text":"75"}
]
}),
displayField: 'text',
valueField: 'text',
value: '25',
queryMode: 'local',
editable: false,
forceSelection: true,
listeners:
{
select: function(combo, records, eOpts)
{
var value = parseInt(records[0].get('text'), 10);
store.pageSize = value;
store.loadPage(1);
}
}
}
]
});

shakerkk
22 Sep 2014, 3:57 AM
So my biggest problem in my code is that ...i want somehow to include pageSize plugin in my pagingtoolbar and i dont know how ?

Farish
22 Sep 2014, 4:24 AM
what do you mean by pageSize plugin? pageSize is a config of store. you can take a look at how I have added listener to the combo and using the value on select event to change pageSize.

shakerkk
22 Sep 2014, 5:12 AM
Sorry i wanted to say that is a plugin that helps you to set dynamicaly pageSize of your grid and ...i'm trying to do that but in my pagingtoolbar :-?

Farish
22 Sep 2014, 5:28 AM
either I am not understanding your problem or you are not understanding what I am saying. With the example code I posted above, you should be able to change your code.

shakerkk
22 Sep 2014, 5:41 AM
Lets start with the begining
1. I have a pagingtoolbar .
2. I want inside the pagingtoolbar to have a combobox with 4 values like 10 15 25 30 that alows me to select how many rows i want on my page:), i want somehow to overite pagingtoolbar and to add in it a combobox with some value that allows me to select "how many items i want on the page", and i want to use it in my Grid.js something like :

dockedItems: [
{

xtype: 'custompaging',
dock: 'bottom',
displayInfo: true,


}
]

Farish
22 Sep 2014, 6:26 AM
yes i understand what you are trying to do. which part of your code isnt working is not clear. it would be best if you could create a sencha fiddle (https://fiddle.sencha.com/#home) or jsfiddle (http://jsfiddle.net/). also, compare your code with mine and see what differences are there. I havent used extend but I just created a pagingtoolbar with an extra combo and attached a select event listener to it. extending it can be done similarly.

shakerkk
22 Sep 2014, 6:42 AM
i wanted to cread fiddle but is very long code :) and takes me very long ,time your code is good but my code have some problems with listener : .....init function onIniView and OnPageSizeChanged function , i dont know why but is not working at all...not event seen as an error or something .



init: function (paging) {
var me = this;
paging.on('afterrender', me.onInitView, me);
},
onInitView: function (paging) {
var me = this;
me.setValue(paging.store.pageSize);
for (var i = 0; i < paging.items.length; i++) {
if (paging.items.items[i].xtype == 'tbfill') {
paging.remove(paging.items.items[i]);
paging.add(i, me);
}
}
me.on('select', me.onPageSizeChanged, paging);
me.on('specialkey', function (combo, e) {
if (13 === e.getKey()) {
me.onPageSizeChanged.call(paging, me);
}
});
},
onPageSizeChanged: function (combo) {
var me = this;
me.store.pageSize = parseInt(combo.getRawValue(), 10);
me.doRefresh();
}

I dont know how to get this functions work..:D when my combo is on the page..

Farish
23 Sep 2014, 2:32 AM
use console.log() to print out debug messages or values of variables/components etc. this way you will know where the error occurs. e.g.


onPageSizeChanged: function (combo) {
console.log("onPageSizeChanged");
var me = this;
console.log(me);
console.log(me.store);
me.store.pageSize = parseInt(combo.getRawValue(), 10);
me.doRefresh();
}

are you sure that me contains the grid and not the paging toolbar? if me is the paging toolbar, make sure that me.store is defined.

shakerkk
23 Sep 2014, 3:13 AM
oky thanks :) i solved but with plugin, i created a diferent file that extended combobox and used functions above and then in my pagingtoolbar i used as plugin.I belived i didnt used function from above properly ..thanks for your advice:)