View Full Version : Event handlers when working with Ext Designer

7 Apr 2010, 10:53 PM
Hi, I'm having trouble understanding how to write event handlers with code generated by Ext Designer.

For example, lets say I have a single button and upon clicking the button, I want a message box to appear. Ext generates two files MyButton.ui.js and MyButton.js.

Since its recommended not make modifications by hand to the MyButton.ui.js file, and any event handlers should go in the MyButton.js file.

However I am having trouble understanding how to write handlers - OK, I'm new to ExtJS, and I have limited JS skills, but I catch on real quick with any new product / language and I have not been able to work this one out on my own. I could not find any examples.

So, for example, if I want to show a simple message box if I were to edit the MyButton.ui.js file, I could add the following code to MyButton and it will work:

handler: function(){
Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');

However since the ui.js file should not be modified by hand, and all event handlers should be placed in the MyButton.js file, I'm not sure how to write the code to do that, or where exactly it needs to go.

Any help appreciated.

7 Apr 2010, 11:11 PM
So typically your button will be within a larger Panel/FormPanel/Grid etc. Place your button within a toolbar docked in a Panel just to give yourself a real world scenario.

Within the designer click on the button you want to add the handler to.

Navigate to the component configuration grid in the bottom right of the designer.

Search for "auto". In the "autoRef" configuration specify "confirmBtn".

Save your project.

Export your project.

Within YourPanel.js after initComponent's superclass has been invoked....

confirmBtn.on('click', this.onConfirmBtnClick, this);

You can then add a onConfirmBtnClick method within your .js class and provide whatever implementation you'd like.

8 Apr 2010, 2:39 AM
Ok, thanks, but still not getting it ... like I said, I'm a newbie.

Where do I add the onConfirmBtnClick method and how do I code the method?

The js file has the following code:

MyForm = Ext.extend(MyFormUi, {
initComponent: function() {

ConfirmBtn.on('click', this.onConfirmBtnClick, this);

I'm not sure where I place the onConfirmBtnClick method within this code, and I'm not sure how to even code the method.

Can you please provide me with an example?


8 Apr 2010, 9:11 AM
Where do I add the onConfirmBtnClick method and how do I code the method?

MyForm = Ext.extend(MyFormUi, {
initComponent: function() {
this.confirmBtn.on('click', this.onConfirmBtnClick, this);
onConfirmBtnClick: function() {
// your implementation here!


onConfirmBtnClick is a new method that you've added to your class "MyForm".

8 Apr 2010, 10:02 AM
Dear Aconran,

Thanks a lot. This explanation was extremely useful. I learned a lot of things in this very simple example. I made an example and it works like a charm. I will try this new approach to specify handler in my day to day work. It sounds quite right. Thanks again.
P.S. I think this should be part of a small tutorial as I think many of us will have this question.

8 Apr 2010, 12:18 PM
Dear Aconran,
I think this should be part of a small tutorial as I think many of us will have this question.


8 Apr 2010, 3:31 PM
Thanks - got it working now!

12 Apr 2010, 2:08 PM
Do you have any general info about how to use the 'autoref' attribute? I'm not really sure what's going on there.

12 Apr 2010, 3:27 PM
Do you have any general info about how to use the 'autoref' attribute? I'm not really sure what's going on there.

autoRef is a designer specific configuration which will calculate how many levels it needs to go up to place a ref configuration on the top level component.

So if you specify autoRef: 'myReference'

You can always access this.myReference at the top level component for a reference to that class.

13 Apr 2010, 8:40 AM
Thanks for that, a very useful helper.

15 Apr 2010, 6:25 AM
Like suggested by Aconran now I'm using initComponent function also to set some properties, that at the moment Designer doesn't include, and the templating system too.

MyForm = Ext.extend(MyFormUi, {
initComponent: function() {
this.searchCombo.minLenght = 3;
this.searchCombo.maxlenght = 50;
this.searchCombo.displayField = 'chiamante';
this.searchCombo.valueField = 'chiamante';
this.searchCombo.loadingText = 'Ricerca in corso...';
this.searchCombo.hideTrigger = true;
this.searchCombo.triggerAction = 'all';
this.searchCombo.itemSelector = 'div.combo-result-item';

resultTplCombo = new Ext.XTemplate(
'<tpl for="."><div class="combo-result-item">',
'<div class="combo-name">{chiamante}</div>',
'<div class="combo-details">Mail: {mail}</div>',
this.searchCombo.tpl = resultTplCombo;
this.searchCombo.on('select', this.onSelectItem, this);
onSelectItem: function() {
// do something!


I don't know if I do it in the best way.....

27 Apr 2010, 2:59 AM

27 Apr 2010, 9:49 AM

27 Apr 2010, 8:07 PM
We are working on docs for the Designer as well as many enhancements to make this easier in future releases. Our recent blog post contains a link to a quick demo and touches lightly Event Handlers within components.


The gist is to have a reference (via autoRef) to the cmp you wish to add the handler.

A simple example:

MyForm = Ext.extend(MyFormUi, {
initComponent: function() {

//#1 confirmBtn is ref'ed in the UI class
this.confirmBtn.on('click', this.onConfirmBtnClick, this);
//# 2 Create the function
onConfirmBtnClick: function() {
// #3 Write your implementation here!


11 Mar 2011, 10:03 AM
I have written a few blogposts about the subject.

Have a look at:
- Ext Designer, tutorial for developers (http://aboutfrontend.com/extjs/ext-designer-tutorial-for-a-developer/)
- Ext Designer basics, building a form (http://aboutfrontend.com/extjs/ext-designer-basic-tutorial-forms/)
- Ext Designer basics, building a form (screencast) (http://aboutfrontend.com/extjs/ext-designer-screencast-getting-started-simple-form/)

The following might also be of interest:
- Rapid RIA development with Ext Designer and Zend Framework (http://aboutfrontend.com/extjs/extdesigner-extjs-and-zend-framework/)

Best regards,
Nils-Fredrik / aboutfrontend.com (http://aboutfrontend.com)

17 Mar 2011, 12:40 AM
Thanks for the tips. Definitely useful for getting started.

I'm having some trouble following these steps through and getting them to work for a combobox... if I had to guess, I imagine it has to do with being a combobox, but why does that matter? I can't seem to find anything in the documentation that would suggest it should not work.

What I'm trying to do - besides learn Ext JS and Designer - is set the value of a combobox field back to the text value, rather than the id that shows up when a user selects a value from the dropdown. (Honestly, I haven't the foggiest clue why that happens or why you should have to write a line of code to do that - why would you ever want to show the ID value rather than the text value for a dropdown? I really gotta guess there's something I'm missing here.)

Thanks in advance to all!

17 Mar 2011, 4:12 PM
I was having a similar problem, if I understand yours correctly. Here's an override on the Ext.form.Combo that you can place anywhere before actually using a combo box. This should help resolve your issue.

* The following are a series of overrides to resolve some common usability issues with Ext JS.
Ext.override(Ext.form.ComboBox, {
setValue : function(v) {
var text = v;
if (this.valueField) {
if (this.mode == 'remote' && !Ext.isDefined(this.store.totalLength)) {
this.store.on('load', this.setValue.createDelegate(this, arguments), null, {single: true});
if (this.store.lastOptions === null) {
var params;
if (this.valueParam) {
params = {};
params[this.valueParam] = v;
} else {
var q = this.allQuery;
this.lastQuery = q;
this.store.setBaseParam(this.queryParam, q);
params = this.getParams(q);
this.store.load({params: params});
var r = this.findRecord(this.valueField, v);
if (r) {
text = r.data[this.displayField];
} else if (this.valueNotFoundText !== undefined) {
text = this.valueNotFoundText;
this.lastSelectionText = text;
if (this.hiddenField) {
this.hiddenField.value = v;
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = v;

This is in a thread on the forums somewhere..

30 Mar 2011, 4:10 AM
Ok fine, but it is not working witch menu items(with buttons yes), this is an error or as design. If so then what is the proper method for implementing events in menuItems in Designer?

6 Apr 2011, 6:22 AM
hawk67, I replied on your separate thread regarding the MenuItem ref issue. The workaround for that is to add an "id" to your menu items, and you can do


Hope that helps.

12 Apr 2011, 12:05 PM
I had the same issue, but the answers solved it.

However, we are talking about having a component directly within the main class, like a Window or just a Panel... So using 'this.MyComponent' is enough.

But if we have a Window in wich we have a Panel and within the Panel we have a TextField? How to access the TextField in the .js of the Window?

----- Panel
---------- MyComponent

In other words, I designed my entire window in Ext Design and exported it in two files: MyWindow.ui.js and MyWindow.js. I want to access eny component in MyWindow.ui.js from MyWindow.js. So, 'this.MyComponent' is not enough in this case...

An observation:
When delcared directy within the main class, in the ui.js file, the Ref property stay like I set. For exemple
ref: 'MyComponent'.

But if the component is within other component, like a panel, that is within the main class, the Ref property is:

ref: '../MyComponent'.

Thanks. :)

13 Apr 2011, 11:59 AM
The command solved the problem:


15 Apr 2011, 5:25 AM
@FrotasWeb: By setting the "autoRef" property on any of your components, a proper "ref" configuration is generated automatically, so that the reference is placed on the top-most component; in this case, that is your MyWindow class.

Why is "this.MyComponent" not sufficient? It should be perfectly sufficient. As long as you manage your scope properly within all of your functions and event handlers, "this" will always refer to your MyWindow class instance.