PDA

View Full Version : ComboBox with pagination - 'Click' events on the pagingToolbar comboBox buttons



tdteti_
13 Oct 2009, 9:27 AM
Hi all,
I am from Spain and I am starting to use ExtJs 3.0...
My problem is that I have created a comboBox with pagination and I need to recover the click event when the pagination buttons of the pagingToolbar of my combo box are pressed. I means, how can I access to the click event of the pagingToolbar of my comboBox? Could someone help me, please?

I have seen that I can access to the paging toolbar of the comboBox through:

myComboBox.pageTb. ...

But I don't know how to recover the click events for the paging buttons...

For further information, this is the created comboBox:

var myComboBox= new Ext.form.ComboBox({
store: storeObject,
triggerAction: 'all',
displayField:'country_Description',
loadingText: 'Searching...',
emptyText: 'Select...',
typeAhead: false,
width: 200,
pageSize:5,

hideTrigger: true,
mode: 'local',
tpl: rowFormat,
applyTo: 'search_ComboBox',
itemSelector: 'div.search-item'
});

Thanks in advance!!!

MiamiCoder
13 Oct 2009, 12:11 PM
Look for the beforechange (http://www.extjs.com/deploy/dev/docs/source/PagingToolbar.html#event-Ext.PagingToolbar-beforechange) and change (http://www.extjs.com/deploy/dev/docs/source/PagingToolbar.html#event-Ext.PagingToolbar-change) events.

tdteti_
14 Oct 2009, 12:30 AM
I have tried the following two ways and they are not working ...
It does not work either using the 'beforechange' event.
There is something wrong on my code. Thanks in advance for your help!!

1.
var comboSearch = new Ext.form.ComboBox({
store: storeObject,
triggerAction: 'all',
displayField:'country_Description',
loadingText: 'Searching...',
emptyText: 'Select...',
typeAhead: false,
width: 200,
pageSize:5,
hideTrigger: true,
mode: 'local',
tpl: rowFormat,
applyTo: 'search_ComboBox',
itemSelector: 'div.search-item',
triggerAction:'all
});
comboSearch.on(
'change',function() {
Ext.Msg.alert('Pressed');
}
);

2.
var comboSearch = new Ext.form.ComboBox({
store: storeObject,
triggerAction: 'all',
displayField:'country_Description',
loadingText: 'Searching...',
emptyText: 'Select...',
// typeAhead: false,
typeAhead: true,
width: 200,
pageSize:5,
hideTrigger: true,
mode: 'local',
tpl: rowFormat,
applyTo: 'search_ComboBox',
itemSelector: 'div.search-item',
triggerAction:'all',
listeners : {
change: function() {
Ext.Msg.alert('Pressed');
}
}
});

tdteti_
14 Oct 2009, 1:07 AM
Sorry for the last 'reply'. I have reviewed and I understand the the event is over the 'pagingToolbar' (not over the comboBox). My doubt now is how to access to the pagingToolbar object of my comboBox...:s. Thanks again for your help!!

For further information, this is the way that I have tried and to which is not working:


var comboSearch = new Ext.form.ComboBox({
store: storeObject,
triggerAction: 'all',
displayField:'country_Description',
loadingText: 'Searching...',
emptyText: 'Select...',
typeAhead: false,
width: 200,
pageSize:5,
hideTrigger: true,
mode: 'local',
tpl: rowFormat,
applyTo: 'search_ComboBox',
itemSelector: 'div.search-item',
triggerAction:'all'

});


comboSearch.pageTb.on(
'beforechange',function() {
Ext.Msg.alert('Pressed');
}
);