PDA

View Full Version : [FIXED] Touch Event delegation failing when both id and itemId set



PranKe01
6 Feb 2012, 1:40 AM
Hi - it's me again :)

I don't know if it's a bug, bu I will post it here in "Help".

In my project events worked fine. But now they do not work anymore. On the first Panel I got a button, which leads to the second Panel. But that function is not called anymore. The same on the List in the second Panel. When I click on an item, the function is not called anymore... I will describe how I set the events:

First I selected the List. Then under the tab Events, I click on the plus sign next to "itemtap". Then a Basic Event Binding is generated, in which I wrote the following code:

Ext.Msg.alert('Test', 'You selected '+record.get('item')+' with index '+index+'!', Ext.emptyFn);

That did work some days ago, but now it's broken and I don't know where to search for the problem. Any ideas, where to search?

Thanks in advance!

mik3e
6 Feb 2012, 2:54 AM
Hi,

Do you have any error messages in your console?
Maybe it´s a problem with addressing the component.

Ciao,
Mike

PranKe01
6 Feb 2012, 3:25 AM
I found the problem.

When I create a Button and give it an id (saveBtnId) AND an itemId (saveBtn), the following listener is generated:


{ fn: 'onSaveBtnIdTap',
event: 'tap',
delegate: '#saveBtnId'
}

That does not work for me. When I change it to the following code, it works:


{ fn: 'onSaveBtnIdTap',
event: 'tap',
delegate: '#saveBtn'
}

I don't know if this is a bug, or I am doing wrong, but that's not so cool. I don't want to manually change the delegate every time, I deploy...

mik3e
6 Feb 2012, 3:40 AM
You should try to use the DOM Model instead of IDs as selector - you can find a good tutorial in the sencha docs. Maybe this can solve your problem...

Besides you should posts those questions in the correct subforum.

Mike

aconran
6 Feb 2012, 11:22 AM
I found the problem.

When I create a Button and give it an id (saveBtnId) AND an itemId (saveBtn)
....
I don't know if this is a bug, or I am doing wrong

There are arguably a few different problems here with both Sencha Touch and with the Designer. We will make sure that the Designer works when both id's and itemId's are set.

Without digging into the code it looks like component query checks id first and if it has one it does not check its itemId. Designer should be matching this behavior but currently does not.

PranKe01
7 Feb 2012, 4:28 AM
Okay - the problem occured again. But this time I did not set the ID of the button. Anyway, the event is not called :( My project hierarchy looks like this:

31437
The project starts with the MainPanel, which displays the LoginView. Both are CardLayouts. In the LoginView I got a Button inside the loginForm. I added a tab-Event to this Button (which does not got an id, but an itemId called "loginButton"), but the function is never called :(

That's no fun when nothing works like expected. Does anyone got an idea what the problem is?

EDIT: I attached a sample project ( 31440 ). Note that the event on the Button is not called. Instead you have to call

Ext.ComponentQuery.query('mainPanel')[0].getLayout().container.setActiveItem(1);
in the console. I also mentioned that when clicking on an item in the menu, the "back-button" does not work...

Maybe that depends on an "architectional problem". Any help on that would be great :)
Note that the menu-items gets loaded from a json file. Make sure the store-proxy points to the right directory.

31440

Phil.Strong
7 Feb 2012, 8:06 AM
Can you try to use this with Touch Beta1 (upgrade from PR4). Could be this bug will be fixed.

Designer will be upgraded to Beta1 this week

PranKe01
8 Feb 2012, 12:27 AM
Hi Phil,

I tried to use the beta1 instead. The listener still does not work. But the "Back-Button" in the navigation-toolbar works - but not as excpected! When I click on the back-button it returns to the list. When I then click again on a list item a second back-button appears :-? When going back again, it stays there. It's kind of buggy - sometimes the second back-button even got no text... Because it's a beta I can live with that - but why does the listener not work? In short here is the code:


Ext.define('IP.view.LoginView', { extend: 'IP.view.ui.LoginView',
alias: 'widget.login',


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


onLoginButtonTap: function(button, e, options) {
Ext.ComponentQuery.query('mainPanel')[0].getLayout().container.setActiveItem(1);
}


});


Ext.define('IP.view.ui.LoginView', { extend: 'Ext.Panel',


config: {
layout: {
type: 'card'
},
activeItem: 2,
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Portal'
},
{
xtype: 'formpanel',
itemId: 'loginForm',
ui: 'dark',
items: [
{
xtype: 'fieldset',
instructions: 'Ein Login ist nur möglich, wenn Sie ihn im Portal freigeschaltet haben.',
title: 'Login',
items: [
{
xtype: 'emailfield',
label: 'E-Mail',
labelWidth: '33%',
name: 'email',
placeHolder: 'email@mail.de'
},
{
xtype: 'passwordfield',
label: 'Passwort',
labelWidth: '33%',
name: 'password',
placeHolder: 'passwort'
},
{
xtype: 'checkboxfield',
label: 'Daten speichern',
labelWidth: '50%',
name: 'savelogin',
value: 'true'
}
]
},
{
xtype: 'button',
itemId: 'loginButton',
ui: 'confirm',
text: 'Einloggen'
}
]
}
],
listeners: [
{
fn: 'onLoginButtonTap',
event: 'tap',
delegate: '#loginButton'
}
]
},


onLoginButtonTap: function(button, e, options) {

}


});

Any ideas?

Phil.Strong
9 Feb 2012, 7:45 AM
looking into this to understand if we are generating this code correctly or is there a bug in ST2 beta1.

PranKe01
9 Feb 2012, 8:43 AM
If it helps you, I would send you my project...

Phil.Strong
10 Feb 2012, 1:55 PM
yea please do that I'll PM an email

aconran
17 Feb 2012, 9:59 AM
This bug is fixed in the next version of Touch (after beta 3). It was a bug in the SDK in ComponentQuery.