View Full Version : Rank noob question: attaching event handlers

24 May 2010, 4:43 PM
I read the paragraph in the getting started guide but the example is very incomplete and Im afraid I just don't get it.

I have a simple chat interface, It is a vewiport that contains one panel, that panel contains a text area and a text field.

How do I attach an event handler that recognizes when the "return" key is pressed in the text field?

A real full piece of sample code would be stellar. In general the documentation is seriously lacking those...

24 May 2010, 5:30 PM
I suggest you read the Ext JS API Documentation (http://www.extjs.com/deploy/dev/docs/) and see the Ext JS Samples (http://www.extjs.com/deploy/dev/examples/) for more code examples.

In the docs, see the Ext.form.TextField events and the Ext.EventObject/Ext.EventManager classes.

The Ext Designer docs is not meant to be a tutorial on the Ext JS framework itself.

24 May 2010, 7:33 PM
I have done functional extjs interfaces before. However, you specifically tell user NOT to modify your generated code. This makes the style I have previously used impractical.

An attitude that anyone who can't figure out for themselves how you intended your tool to be used is too stupid to use it will not help sales.

This is not a cheap tool. It's not unreasonable to expect some complete samples of how to use it.

25 May 2010, 5:29 AM
With respect, I had no attitude. Your question was very clear I thought, and I answered it by pointing you in the right direction. I read it as you not knowing how to attach event handlers, period. There was no indication that you were asking "where" to put the code, only "how to do it".

The Getting Started guide is just that, it is not a full set of documentation. We will be providing more Designer examples in the future. The use of the exported code is largely dependent upon having a working knowledge of the Ext JS API and its best practices. The Designer is not marketed in such a way that it would ever give the impression of being a replacement for writing Ext JS code altogether.

With that said, your question in regards to where to put the code is simple. The Getting Started guide does mention this, but maybe not well enough with respect to event handlers specifically (just implementation code in general). When you export your project, there are two files generated for each top-level component in the project: a .ui.js file and a .js file. The .ui.js file contains the complete configuration from the Designer. The .js file is a sub-class of the .ui.js class and is not overwritten on subsequent exports. The .js file is where you can place your behavior, including attaching event handlers to your component(s).

Example .ui.js file:

MyPanelUi = Ext.extend(Ext.Panel, {
title: 'Chat',
width: 400,
height: 250,
layout: 'vbox',
initComponent: function() {
this.layoutConfig = {
align: 'stretch'
this.items = [
xtype: 'textarea',
fieldLabel: 'Label',
flex: 1
xtype: 'container',
autoEl: 'div',
layout: 'hbox',
layoutConfig: {
pack: 'end',
padding: 10
items: [
xtype: 'textfield',
fieldLabel: 'Label',
width: 200,
margins: '0 10 0 0',
ref: '../textfield'
xtype: 'button',
text: 'Send',
width: 50

Example .js file with event handler:

MyPanel = Ext.extend(MyPanelUi, {
initComponent: function() {

this.textfield.on('render', function(){
this.textfield.getEl().on('keypress', this.onEnterKey, this);
}, this);

onEnterKey: function(e){
if (e.getKey() == e.ENTER){
alert('enter was pressed');

Notice I am attaching the keypress event directly to the TextField's element. Normally you would be able to set the "enableKeyEvents" to true on the TextField and attach directly to the TextField - this config option is currently missing but will be in the next release that contains all of the accidentally and purposefully omitted configs/components from the 1.0.0 release.

26 May 2010, 2:09 PM
Hi Jarred !

Just like to add to Cyberqat comments.

Please be warned, the folowing lines may sound not friendly but, sadly, it reflects some reality.

I started to use Extjs some 9 months ago for a project and I have to admit that the learning curve was kind of steep. Like many, noob, not necessarly very at ease with javascript -- this is why we like to use Prototype and Extjs, so that we don't have to rewrite the whole dictionary -- I posted on the forum what was to me legitimate questions.

From some nice members, I got helpfull replies. But for the majority, I was brushed off with answers that would refer me to the same places, like the example page and some reference.

When you reply to someone to read the stuff, you are indeed sending the wrong message, especially if you work for the company that build the software.

I really like Ext Designer, it's a nice tool. Once you have decripted how it works ! Imagine Windows Vista with no manual whatsoever !

If you refer me to the examples, well, they are far from being complete. It would have been nice to have forms (simple ones) with the full rundown: Boxes, labels , dropdown and a working "submit" button.

I could probably rely on Saki's examples. But Saki is an experienced programmer and He doesn't code for kids. He simply cannot create a simple form that a noob can understand; he codes and pushes the envelope.

What I also find weird, is your business model where you rely a lot on the community tu build the part that is lacking to your software: Good documentation, examples and how-to's.

I saw that you posted a video showing the features of Designer. You could have added some more that would take --by the hand-- a nood and do the full drill of creating simple projects with Designer.

If you'd like to know what I'm talking about, go take a look at this website that teach Adobe After Effects. The videos are very instructive.


The guy does 1 tutorial every week !

Ok. Back to my comments....

I did not touch Extjs for 6 months and now I come back with version 3 with a purchased copy of Designer...Basically, I'm lost !

I'm just trying to do a simple form (one box, one button) to submit. No fancy coding...

Sidetracking: Why now I have to do that superclass and extend stuff ? Isn't that complicating everything..from version 2 ??

I saw one of your post that you where working on a manual for Designer. Do you have a planned release date ?

Thanks !

6 Jun 2010, 10:14 AM
Than you ,that was very helpful.

The books I have show adding listeners directly to the tree, not with the "on" function.

This now makes sense.