View Full Version : selection change listener on grid's toolbar buttons?

6 Jun 2012, 6:48 AM
I have a grid using Ext.selection.CheckboxModel and a tool bar along the top of the grid. I'd like to convey selection change events to the toolbar and have every button respond with it's own listener/handler to the selection change. Like how a forms fields each have their own verify function.


6 Jun 2012, 6:52 AM
you may use the selectionchange event of the grid to change something on the toolbar:

grid.on('selectionchange', function (model, srecords, eOpts) {
// change toolbar buttons here

srecords is an array of selected records (only one record if you do not have multiselect)

6 Jun 2012, 6:57 AM
I understand and am using that but what I don't understand is how to add a SelectionChange event handler or listener to the buttons and how to call that handler/listener from the grid.SelectionModel.SelectionChage event listener.


6 Jun 2012, 7:01 AM
I dont understand your question. Could you rephrase what you want to achieve?

6 Jun 2012, 7:26 AM
I have this on the grid.

selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
listeners: {
selectionchange: {
element: 'el', //bind to the underlying el property on the panel
fn: function( t, selected, opts){
//Ext.getCmp( 'logwin' ).insert( 0, { html: 'Selection Changed' } );
this.tbar.GridSellChage( selected ); // TELL the TBAR a SelectionChange has occured
} }
} ),

On the buttons I'd like to define individual SelChange handlers like this.

tbar = fv.GridPanel.addDocked( [{
xtype: 'toolbar',
dock: 'top',
defaults: { minWidth: 'minButtonWidth',
handler: function(){ Ext.getCmp( 'logwin' ).insert( 0, { html: this.text + ' pressed' } ); },

items: [
{ xtype: 'button', icon: 'images/icons/arrow_turn_left.png', enabled: true, text: '..',
listener: { 'GridSelChange: function(sel){ //enable or disable based on selection }