PDA

View Full Version : Registering events inside Ext Designer Generated Code



crgrah
15 Mar 2012, 8:27 AM
Hi to forum users,

This is my first post and I'm having issues with the above mentioned problem

This is my code which returns the error

"Uncaught TypeError: Cannot call method 'on' of undefined"

Ext.define('MyApp.view.LoginViewport', {
extend: 'MyApp.view.ui.LoginViewport',


initComponent: function() {
var me = this;
me.callParent(arguments);
},

extend:'MyApp.view.ui.LoginViewport',
initComponent: function() {
this.superclass.initComponent.call(this);
this.btnLogin.on('click', this.onbtnLoginClick, this);
this.btnRetrievePassword.on('click', this.onbtnRetrievePasswordClick, this);
},
onSubmitBtnClick: function() {

},
onCancelBtnClick: function() {

}
}
);

So I have two questions, can i get intellisense working with vwd2010
And what simple thing am I missing such that the button objects are undefined?
ps inside the auto generated file those objects exist.

Thanks in advance for any help with this
Ext Designer Newbie.

arthurakay
15 Mar 2012, 8:41 AM
You buttons have not been rendered or initialized yet. You might move those calls into the 'afterrender' event, so that you know they exist at the proper time.

crgrah
15 Mar 2012, 3:46 PM
new code

/// <reference path="file:C:\iPsites\intranet.familychallenge.com.au\touch\sencha-touch-debug-w-comments.js" />


Ext.define('MyApp.view.LoginViewport', {
extend: 'MyApp.view.ui.LoginViewport',


initComponent: function () {
var me = this;
me.callParent(arguments);
},


extend: 'MyApp.view.ui.LoginViewport',
initComponent: function () {
this.superclass.initComponent.call(this);
this.on('afterrender', this.attachButtons, this);
},


attachButtons: function () {
btnLogin.on('click', this.onbtnLoginClick, this);
btnRetrievePassword.on('click', this.onbtnRetrievePasswordClick, this);
},




//button handlers
onbtnLoginClick: function () {

},
onbtnRetrievePasswordClick: function () {


}
}


);

now the error message is
Uncaught TypeError: Object #<HTMLDivElement> has no method 'on'

??

crgrah
16 Mar 2012, 2:02 AM
It seems to me as though none of the ext js events or functions are defined.

since the base designer.html is generated by ext designer could this be a problem

with the location of the touch library?

Cheers

arthurakay
16 Mar 2012, 6:39 AM
Several points:

(1) Use the CODE or PHP tags when pasting your code into our forum. It makes things WAY easier to read.

(2) Where are "btnLogin" and "btnRetreivePassword" defined (I see them used in your attachButtons() method)?

(3) The error "Object #<HTMLDivElement> has no method 'on'" is self-explanatory: you're trying to use the on() method to attach an event listener... but you're trying to attach a listener to an HTML element when it should be some sort of Ext.Element() or Ext.Component() (or some subclass... like Ext.Button, I assume in this case).

crgrah
16 Mar 2012, 7:02 AM
btnLogin and btnRetrievePassword are the 'ids' on the buttons as
defined in sencha designer
ie.

* Do NOT hand edit this file.
*/


Ext.define('MyApp.view.ui.LoginViewport', {
extend: 'Ext.container.Viewport',


activeItem: 0,
layout: {
align: 'stretch',
type: 'vbox'
},


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'form',
height: 300,
width: 400,
bodyPadding: 10,
title: 'Login',
items: [
{
xtype: 'textfield',
id: 'txtUserName',
width: 400,
fieldLabel: 'User Name',
allowBlank: false,
maxLength: 30,
minLength: 3,
anchor: '100%'
},
{
xtype: 'textfield',
id: 'txtPassword',
width: 400,
inputType: 'password',
fieldLabel: 'Password',
allowBlank: false,
maxLength: 30,
minLength: 3,
anchor: '100%'
},
{
xtype: 'button',
id: 'btnLogin',
width: 200,
text: 'Login',
anchor: '100%'
},
{
xtype: 'button',
id: 'btnRetrievePassword',
width: 200,
text: 'Retrieve Password',
anchor: '100%'
}
]
}
]
});


me.callParent(arguments);
}
});

and yes i get that the 'on' error is self explanatory, hence my previous post here.
this is an incredibly simple example, it is in fact copied from your own code files,
all I am trying to do is add events to buttons, how can this be so problematic,
it is the auto generated code from ext designer plus 3 lines.

please help I need to move forward on this project.

arthurakay
16 Mar 2012, 7:29 AM
and yes i get that the 'on' error is self explanatory, hence my previous post here.
this is an incredibly simple example, it is in fact copied from your own code files,
all I am trying to do is add events to buttons, how can this be so problematic,
it is the auto generated code from ext designer plus 3 lines.

please help I need to move forward on this project.

Calm down... I'm here to help! But please use the CODE or PHP tags in your WYSIWYG when pasting code...

It's fine that "btnLogin" and "btnRetreivePassword" are IDs on the buttons, but you can't access them by doing this:



btnLogin.on('click', this.onbtnLoginClick, this);
btnRetrievePassword.on('click', this.onbtnRetrievePasswordClick, this);


In the above, "btnLogin" and "btnRetreivePassword" aren't pointers to Ext components (yet).

You should do something like this instead:


var btnLogin = Ext.ComponentQuery.query('button[id=btnLogin]')[0];
btnLogin.on('click', this.onbtnLoginClick, this);


That's a simple example of how to use the ComponentQuery... there are more efficient ways to utilize it for your case (based on what I can see), but let's start with baby steps to make sure you understand where we're headed.

crgrah
16 Mar 2012, 6:08 PM
Thanks,

any further advice would be good

how do I mark your answer as the answer?

cheers

arthurakay
19 Mar 2012, 6:16 AM
I've marked my answer as the "best" for you. Glad it helped!

The only other advice would be for you to start learning how the ComponentQuery works. Then rather than doing a global query of all components, you can call "this.down" or "this.child" or something similar. Maybe use an "itemId" too.