I'm creating a list and also using the itemTpl to add some custom html.
I also added an <input type="button" /> to the itemTpl. So whenever i see my list i also see a button at the right of the item list.

But whenever i press this button then the event of the items list (itemtab) is fired too. Is there a way to avoid this??

So that when i select an item somewhere in my list that the event 'itemtab' gets fired (like it should), but NOT when i press on the button inside of an item. That i only want to use the event of the button. Right now the itemtab gets fired aswell eventhough i clicked on the button and not really on the item itself.

Anyone any idea how to do that??

NickT

12 Sep 2011, 9:52 AM

what if you return false in the onclick event handler for the button by adding that event handler to your input html element

onclick="return false;"

vivendi

12 Sep 2011, 10:07 AM

what if you return false in the onclick event handler for the button by adding that event handler to your input html element

onclick="return false;"

Sorry, i'm not sure what you mean...?

Just to make sure i'll try to clarify my problem.

I have a list with 4 items. In each item i have an <input type="button" onclick="alert('aaa');" /> element.

I can select an item from the list, after that i use the "itemtab" event to see what item got selected in the list.

I can also click on one of the buttons and do something (by using onclick() for example). The only problem is, whenever i click on a button, the item from the list also gets selected.
When i click on the button again, the item gets deselected.

But i don't want that to happen because i'm not really clicking on a list-item, i'm clicking on a button INSIDE the list-item...

And besides, because of this its not only triggering the onclick() event from the button, but also the click event of the list-item everytime i click on the button! I dont want that.\

When i click on the button, the only event that should be triggered is the onclick() event.

But it seems that this isn't possible...??

NickT

12 Sep 2011, 11:17 AM

What I would suggest you consider is extending List and add in buttons similar to the onItemDisclosure feature. With the item disclosure, you can have a button dropped in along the right edge of the list item and trap that event. You may wish to have your own custom button, or even an array of buttons. I am including an extension that I did of list to add an array of 2 extra buttons in addition to the itemDisclosure button, giving me a set of 3 buttons that i can trap independently of the item click itself.

28021
Example extension: so, what i have added is an analyze button and a statuschange button that raises those events....

if (!Ext.isDefined(this.itemTpl)) {
throw new Error("Ext.List: itemTpl is a required configuration.");
}
// this check is not enitrely fool proof, does not account for spaces or multiple classes
// if the check is done without "s then things like x-list-item-entity would throw exceptions that shouldn't have.
if (this.itemTpl && this.itemTpl.indexOf("\"x-list-item\"") !== -1) {
throw new Error("Ext.List: Using a CSS class of x-list-item within your own tpl will break Ext.Lists. Remove the x-list-item from the tpl/itemTpl");
}

if (this.onItemDisclosure) {
// disclosure can be a function that will be called when
// you tap the disclosure button
if (Ext.isFunction(this.onItemDisclosure)) {
this.onItemDisclosure = {
scope: this,
handler: this.onItemDisclosure
};
}
}

this.on('deactivate', this.onDeactivate, this);

this.addEvents(
/**
* @event disclose
* Fires when the user taps the disclosure icon on an item
* @param {Ext.data.Record} record The record associated with the item
* @param {Ext.Element} node The wrapping element of this node
* @param {Number} index The index of this list item
* @param {Ext.util.Event} e The tap event that caused this disclose to fire
*/
'disclose',

So, here is an example of using this extension inline... Notice my itemTpl has no buttons in it, Those are created by the control extension and the events that are raised are done from that extension as well.

I do get to see the alert. I also tried to return false. But that didn't fo the trick either.

Any idea what i'm doing wrong?

jep

13 Sep 2011, 7:38 AM

Yeah, a bit of a pickle if you don't want the selection to happen. What you'd probably need to do is set the list's selectedItemCls (and probably pressedCls, if you didn't want that happening) to some a non-existent CSS class. Then in the itemTap, you'd need to manually set/unset x-item-selected if it wasn't the button being clicked on. Does this example make sense?

I didn't do anything with x-item-pressed other than turn it off. So you'll have to add some more code to make that happen. You might even need to override onTapStart/onTapEnd/onTapCancel to get in the right place.

edspencer

13 Sep 2011, 6:43 PM

This has been asked for a great deal, very happy to say that it's baked into the framework in Sencha Touch 2 :)

jep

13 Sep 2011, 9:27 PM

Great to hear!

Care to give any details beyond that? Is it simply for buttons, or can you easily embed various objects like Lists, Buttons, etc.?

edspencer

13 Sep 2011, 9:41 PM

Great to hear!

Care to give any details beyond that? Is it simply for buttons, or can you easily embed various objects like Lists, Buttons, etc.?

Anything and everything :) I think you'll be very happy with the flexibility we're bringing here