PDA

View Full Version : Event handlers for buttons inside paging tool bar in EditorGrid.bbar



ssamayoa
12 Aug 2010, 7:48 AM
First of all Im relative new to ExtJS so if my question(s) sound silly please forgive me.

I hand crafted some UI which uses EditorGrid + ux filter plugin + buttons in the bbar of the grid. Now I want to do something alike with designet, so:


How can I set the event handler of the buttons?
How can I use ux filter plugin?


Regards.

jarrednicholls
12 Aug 2010, 1:15 PM
Hi ssamayoa,

For both of those, you will implement them in the implementation .js file (not the .ui.js file, which is the UI configuration and overwritten on each export) that is exported with your project.

Assuming your EditorGrid is the exported component, and you assign an autoRef of "myBtn" to one of the buttons, you can setup a click event handler and your plugin in the .js file as such:



MyEditorGrid = Ext.extend(MyEditorGridUi, {
initComponent: function(){
MyEditorGrid.superclass.initComponent.call(this);

this.myBtn.on('click', this.onMyBtnClick, this);

this.plugins = [
new Ext.ux.grid.GridFilter({...})
];
},

onMyBtnClick: function(){
alert('myBtn has been clicked!');
}
});


Code in bold was added to the exported .js file. I don't know if the filter plugin is exactly named that, but that's how you specify a plugin to a component's configuration. Likewise, notice I am attaching a 'click' event handler to the "myBtn" button in this same area.

Hope that helps!

ssamayoa
12 Aug 2010, 1:23 PM
Thanks.
Reading another post (responded by you BTW) I saw that.
But setting such property with text "btnSave" the generated code has "../btnSave":

{
xtype: 'button',
text: 'MyButton',
height: 22,
ref: '../btnSave'
}

Is correct or do Im missing something?

Regards.

jarrednicholls
12 Aug 2010, 9:15 PM
Yes that is correct. '../btnSave' means it will put the btnSave reference up two levels (button -> toolbar -> EditorGrid). Without the '../', it only goes up one level (button -> toolbar). So you would have had to call "this.bbar.btnSave" in order to reference it. The Designer's "autoRef" obviously takes care of generating the "ref" configuration value for you with the proper path specification.